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

【问题标题】：How to set og:image in Nuxt.js Nuxt/Content blog with images in content folders如何在 Nuxt.js Nuxt/Content 博客中使用内容文件夹中的图像设置 og:image
【发布时间】：2021-11-16 13:54:36
【问题描述】：

如何获取已部署图像的最终位置的字符串表示形式，我可以将其提供给 og:image 标头代码，并在部署时让 og:header 指向正确的 url？ p>

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

当我分享帖子时，我希望 reddit 等服务选择合适的缩略图，因此我想在每个帖子上配置 og:image 标题。

Github code here。这些帖子位于/content/posts，我使用markdown 文件中的v-img component 来显示该帖子文件夹中的图像。

我已经知道如何在 slug file for posts 中添加 og:image 标题：

  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
        }
      ]
    }
  }

但是，当部署博客时，这不起作用，因为部署的图像链接发生了变化。例如，在开发模式下，this.post.image 可能指向 pos_DSC01447.jpg，但在部署的站点中，图像已移动到 pos_DSC01447.37e98b4.jpg，其中额外的位会随着每次部署而更改。在部署的版本中，this.post.image 缺少这个额外的位，导致 og:image 的 url 不正确。

【问题讨论】：

标签： javascript vue.js vue-component nuxt.js nuxt-content

【解决方案1】：

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

【讨论】：