Vue Markdown图片不显示

Question

我正在使用vue-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://vuejs.org/v2/guide/syntax.html#Attributes

---

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

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