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

---

Вытакже можно использовать общую папку , содержимое которой всегда связано. Например, для файла public/images/7801_4_lang_image.PNG и при условии, что ваше приложение работает в корневом каталоге домена

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