0

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

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

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

Github 代码在这里。帖子位于/content/posts中，我使用降价文件中的v-img 组件来显示该帖子文件夹中的图像。

我已经想出了如何在slug 文件中为帖子添加 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 不正确。

4

1 回答 1

0

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

于 2021-10-06T05:45:34.147 回答