Vue markdown Image not displaying

Question

I'm using the vue-markdown package to render markdown. It seems to work except the images don't display. The file path is correct as I can have an img show up correctly

<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 -->

Changing the @ to .. doesn't change anything either, the top one displays but the bottom one doesn't. The case of png/PNG also doesn't matter. Am I referencing the image wrong?

Answer 1

The file loader doesn't know about images in Markdown so Webpack doesn't know to bundle them.

Typically you need to require() the image source (see https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports )

You could try this but I'm not entirely sure if it will work with the vue-markdown component.

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

To use the source prop, you would use something like

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

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

---

You could also use the public folder who's contents are always bundled. For example, for a file public/images/7801_4_lang_image.PNG and assuming your app runs at the domain root

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