如何在 Nuxt.js Nuxt/Content 博客中使用内容文件夹中的图像设置 og:image

Question

如何获取已部署映像的最终位置的字符串表示形式，我可以将其提供给 og:image header 代码并使 og:header 指向部署时正确的 url?

我有一个基于 Nuxt.js 和 Nuxt 内容的 website。为了让事情井井有条，我修改了通常的 nuxt 设置，以便我可以将 post .md 文件和它们引用的图像捆绑到一个文件夹中，而不是将所有图像保存在单独的 /static 或 /assets 文件夹中.该站点以 static/generate 模式部署在 netlify 上。

当我分享 post 时，我希望像 reddit 这样的服务能够 select 适当的缩略图，所以我想在每个 og:image header 上配置 [= =45=].

Github code here. The posts are in /content/posts, and I use the v-img component 在降价文件中显示 post 文件夹中的图像。

我已经想出如何在 slug file for posts 中添加 og:image header:

  head () {
    return {
      title: this.post.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.post.description
        },
        {
          hid: 'og:image',
          property: 'og:image',
          content: 'https://brianssparetime.com/_nuxt/content' + this.post.dir + '/' + this.post.image
        }
      ]
    }
  }

但是，部署博客时，这不起作用，因为部署的图像 link 发生了变化。例如，在开发模式下，this.post.image 可能指向 pos_DSC01447.jpg，但在已部署站点中，图像已移动到 pos_DSC01447.37e98b4.jpg，其中附加位随着每次部署。在已部署版本中，this.post.image 缺少此附加位，导致 og:image.

的 url 不正确

Answer 1

已解决，但 davydnorris 在此 github issue comment。答案是 content: 'https://www.brianssparetime.com' + require(\@/content${this.post.dir}/${this.post.image}`)`

如何在 Nuxt.js Nuxt/Content 博客中使用内容文件夹中的图像设置 og:image

How to set og:image in Nuxt.js Nuxt/Content blog with images in content folders

javascript

vue.js

vue-component

nuxt.js

nuxt-content