Vue降价图像不显示

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道具，您可以使用类似的东西

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

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

---

您还可以使用始终捆绑内容的公用文件夹。 例如，对于文件public/images/7801_4_lang_image.PNG并假设您的应用程序在域根目录下运行

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