正在从 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 2.0 开始，导入语句在 nuxt 配置中可用。 See release notes。但这行不通，因为还没有装载机和其他东西。

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

  import ogImage from '@/path/to/image.png';
  export default {
  head () {
    return {
      meta: [
        { hid: 'og:image', property: 'og:image', content: this.BASE_URL+ ogImage }
      ]
    }
  },

Answer 2

如果你想把图片放到og:image元标签，你应该把你的图片移动到静态文件夹，因为静态目录直接映射到服务器根目录。在这里你可以看到我的设置示例。

在你运行生成脚本后，你可以去dist文件夹打开你页面的index.html，你会看到图像url改变到根目录。

Answer 3

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

在 nuxt.config.js

中创建一个 publicRuntimeConfig

publicRuntimeConfig: { baseURL: process.env.NUXT_BASE_URL }

在布局文件中添加：

head() {
  return {
    title: 'PAGE TITLE',
    meta: [ { hid: 'og:image', property: 'og:image', content: `${this.$config.baseURL}/logo.png` } ]
  }
}

Answer 4

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

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

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

正在从 nuxt.config.js 中的资产加载 og:image

Loading og:image from assets in nuxt.config.js

nuxt.js