如何使用v-html在vue中显示来自静态django文件夹的图像

Question

我的Django应用的静态文件夹中有一个png图像，当从html文件中进行调用时，效果很好，如下所示：

<img src="{% static 'app1/emojis/celebration.png' %}">

但是当我有

img_name:"<img src=\"{% static \'app1/emojis/celebration.png\' %}\" alt=\"img_error\" >"

在javascript文件中，我在HTML中将其渲染为<span v-html="img_name"> </span> 该图像未显示。而是显示替代文本"img_error"。

没有任何静态文件的正常html标签可以正确呈现：

在Javascript中：

h_tag:"<h1> hello </h1>"

以HTML格式显示：

<span v-html="h_tag">  </span>

所以我如何让Vue理解Django中静态文件的文件夹路径。 我不是在问如何与Django一起使用时更改Vue的分隔符。

Answer 1

以下两行代码在Django中的工作方式完全相同： 第二种方法也适用于Vue。因此使用第二种方法很方便。

<img src="{% static 'app1/emojis/celebration.png' %}">
<img src="/static/app1/emojis/celebration.png" >