如何在Nuxt.js+Nuxt/Content博客中配置content文件夹图片的og:image地址

• 复用现有图片解析逻辑
  当前项目的VImg组件已实现同目录图片相对路径转打包后带哈希路径的能力，将该路径解析逻辑抽离为公共工具函数，在_slug.vue的head方法中直接调用函数传入对应目录和图片名，即可得到正确的带哈希资源路径，赋值给og:image的content字段即可。
• 配置缩略图跳过哈希重命名
  针对文章OG预览图这类需要固定路径的资源，可以统一命名为固定格式（如og-cover.jpg），在nuxt.config.js中修改构建配置，跳过对这类资源的哈希重命名处理：

export default {
  build: {
    filenames: {
      asset: ({ isDev, name }) => {
        // 匹配OG预览图不添加哈希后缀
        if (/content\/posts.*og-cover\.jpg$/.test(name)) return '[path][name].[ext]'
        return isDev ? '[path][name].[ext]' : '[path][name].[hash:7].[ext]'
      }
    }
  }
}

配置完成后OG预览图打包后路径不会变化，原有拼接路径的逻辑可直接生效。

• 前置解析图片路径存入文章元数据
  在每篇markdown文件的头部frontmatter中，用require包裹预览图路径：

---
title: 示例文章
ogImage: require('./封面图.jpg')
---

Nuxt Content解析内容时会自动执行require逻辑，直接返回带哈希的最终资源路径，在head方法中直接拼接域名后赋值给og:image即可。

内容的提问来源于stack exchange，提问作者Brians Spare Time