NUXT：使用 Markdown-it 显示相对于 Markdown 内容的图像

这是 Nuxt 的纯静态实现。我正在使用从 yaml 内容文件（不是 markdown）读取的 markdown 内容。由于内容位于 json 对象中，因此它们正在使用$md.render(blog.content)。假设 blog.content 是一个 Markdown 字符串。

模板如下：

...
<div v-html="$md.render(blog.content)></div>
...

nuxt.config.js 文件具有以下内容：

export default {
  target: static,
  ...
  modules: [
    '@nuxt/content',
    '@nuxtjs/markdownit',
    ...
  ],

  markdownit: {
    runtime: true,
    html: true,
  },
  ...
}

对于常规 md 字符串，这按预期工作。

我想使用存储在博客页面的图像子目录中的图像（而不是来自资产或静态目录）。并在 markdown 字符串中引用它

内容目录的结构为：

content
   blogs
      blog1
         images
            b1i1.png
            b1i2.png
         content.yaml
      blog2
         images
         content.yaml
   ...

Markdown 字符串可能是这样的

# Study this Digaram
The following is a diagram

<img src="images/b1i1" alt="diagram"/>

有没有办法将此图像发送给 vue 将其解析为生成图像的路径？谢谢

从 Nuxt 3 开始，您可以使用nuxt-内容资产 https://github.com/davestewart/nuxt-content-assets module.

在运行时，它将内容源中找到的所有图像复制到构建时文件夹，将任何匹配的相对路径替换为公共路径，并使用 Nitro 提供图像。

在构建时，图像被复制到最终的构建输出。