从nuxt.config.js中的资产加载og：image

Question

是否可以导入图像并将其应用于og：image元标记？ 我有以下nuxt.config.js：

module.exports = {
  mode: 'universal',

  head: {
    title: 'title name',
    meta: [
      // { hid: 'og:image', property: 'og:image', content: process.env.BASE_URL + ogImage },
    ],
  },

  // ...
};

在普通的Vue项目中，可以通过使用import轻松完成此操作：

import ogImage from '@/path/to/image.png';

但是，nuxt.config.js中不提供导入语句，仅使用require会导致加载二进制文件而不是资产路径。

Answer 1

将图片保存在静态文件夹中。

在 nuxt.config.js 中创建一个 publicRuntimeConfig

end()

在布局文件中添加：

publicRuntimeConfig: { baseURL: process.env.NUXT_BASE_URL }

Answer 2

从nuxt 2.0开始，在nuxt config中可用的导入语句。 See release notes。但这是行不通的，因为还没有洗衣店和其他东西。

您可以在布局文件中进行设置。

`{ The number is ${parseInt(someNumber) + 1} }`

Answer 3

如果要将图像放入og：image meta标记，则应将图像移动到静态文件夹，因为静态目录直接映射到服务器根目录。 在这里，您可以看到我的设置示例。

运行generate脚本后，可以转到dist文件夹以打开页面的index.html，您将看到图像URL更改为根。

Answer 4

将您的图像放在静态目录中。

然后将以下内容添加到 nuxt.config.js

head() {
  meta: [
  { charset: 'utf-8' },
  {
    hid: 'og:image',
    property: 'og:image',
    content: '/my_image.jpg',
  },
],
}