image - Vue markdown 图片不显示

Question

我正在使用 vue-markdown包呈现 Markdown 。它似乎工作，除了图像不显示。文件路径正确，因为我可以正确显示 img

<img src="@/assets/7801_4_lang_image.png"><!-- shows up -->
<vue-markdown>![img](@/assets/7801_4_lang_image.PNG)</vue-markdown><!-- doesn't show up -->

将 @ 更改为 .. 也不会改变任何内容，顶部的显示但底部的不显示。 png/PNG 的大小写也无关紧要。我引用的图片有误吗？

Answer 1

文件加载器不知道 Markdown 中的图像，因此 Webpack 不知道要打包它们。

通常您需要require() 图像源(参见https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports)

你可以试试这个，但我不完全确定它是否适用于 vue-markdown 组件。

![img]({{ require('@/assets/7801_4_lang_image.PNG') }})

要使用 source Prop ，您可以使用类似的东西

<vue-markdown :source="`![img](${require('@/assets/7801_4_lang_image.PNG')})`">

参见 https://v2.vuejs.org/v2/guide/syntax.html#Attributes

---

你也可以使用 the public folder谁的内容总是捆绑在一起。例如，对于文件 public/images/7801_4_lang_image.PNG 并假设您的应用程序在域根目录下运行

![img](/images/7801_4_lang_image.PNG)