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

问题描述

这是针对Nuxt的纯静态实现。我使用的是从YAML内容文件读取的标记内容(不是标记)。由于内容在json对象中，因此使用$md.render(blog.content)呈现。假定blog.content是一个标记字符串。

模板如下：

...
<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,
  },
  ...
}

对于常规多维字符串，这将按预期工作。

我想使用存储在博客页面的Images子目录中的图像(而不是从Assets或静态目录)。并在降价字符串中引用它

内容目录的结构为：

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

降价字符串可能如下所示

# Study this Digaram
The following is a diagram

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

推荐答案

默认情况下，Nuxt内容查找存储在&quatics"；目录下的图像。 如果您希望从其他位置访问图像(IE博客/插件/图像)

您必须手动要求它们或使用如下所示的自定义组件

src/Components/VImg.vue

<template>
  <img :src="imgSrc()" :alt="alt" />
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    alt: {
      type: String,
      required: true,
    },
    path: {
      type: String,
      required: true,
    },
  },
  methods: {
    imgSrc() {
      try {
        return require(`~/content${this.path}/images/${this.src}`)
      } catch (error) {
        return null
      }
    },
  },
}
</script>

然后在您的blog_id文件中使用此标记而不是<img/>标记(请确保根据您的项目结构更改Required(~/content${this.path}/img/${this.src}))