在原始html中插入图像

Question

我想样式一些文本从一个数组中的对象属性，因此我使用v-html。但是当我用这些语法插入图片时，它不起作用。

<img :src="@/assets/image.png" alt="image description">
//or this
<img :src="require('@/assets/image.png') alt="image description'">
//or this
<img src="@/assets/image.png" alt="image description">

正确的做法是什么?

Answer 1

v-html将以HTML形式呈现值，而无需在浏览器中进行任何更改。

所以你不能传递值或javascript代码(:src="@/assets/image.png")给这个。

来自文档:

the contents are inserted as plain HTML - they will not be compiled as Vue templates

Answer 2

<img src="@/assets/image.png" alt="image description">

这是正确的，如果图像没有加载，说明你没有把它放在正确的目录。

@/assets从src/assets加载，编译器优化并构建到public目录。

是一个别名:

@=src