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 的大小写也无关紧要。我的图片引用有问题吗？

- depperm

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属性，您可以像这样使用

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

请查看https://v2.vuejs.org/v2/guide/syntax.html#Attributes了解更多信息。

---

您还可以使用public文件夹，其中的内容始终被打包。例如，对于文件public/images/7801_4_lang_image.PNG，假设您的应用程序在域根运行。

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

- Phil

---

第一种选项在我将其放置在标签<vue-markdown>之间时有效，但如果它作为字符串并通过:source加载，则{}会被编码为%7B%7D，导致图像无法再次加载。您有其他想法吗？ - depperm