从nuxt.config.js中的资产加载og:图像

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

自Nuxt2.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 2

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

在publicRuntimeConfig中创建nuxt.config.js

​

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 3

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

​

​

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

​

​