从 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 中没有 import 语句，使用 require 只会导致加载二进制文件，而不是资产路径。

Answer 1

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

在 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 2

从 Nuxt 2.0 开始，nuxt 配置中提供了导入语句。请参阅发行说明。但这行不通，因为还没有装载机和其他东西。

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

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

Answer 3

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

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