如何使用v-html在vue中显示静态django文件夹中的图像[复制]

Question

这个问题在这里已有答案：

• Vue.js in Django Templates 1回答

我在我的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" >