如何转义Django模板标签{% %}，让JS模板字面量${变量}正常解析？

你的问题核心是Django模板引擎会优先解析{% ... %}标签，导致JavaScript模板字符串里的${fname}被Django当成静态文件路径的一部分处理，无法被JS正常解析。以下是两种可行的解决方式：

方式一：使用Django的verbatim标签包裹代码块 #

用{% verbatim %}和{% endverbatim %}包裹包含Django模板标签的JS代码段，这样Django会跳过解析这段内容，直接原样输出给JavaScript，JS就能正常处理模板字符串变量了。

修改后的代码：

var fname = 'pic.jpg';

{% verbatim %}
`<div class='col-md-2 mb-2 posr'>
     <input type='checkbox' class='custom-control-input chk pos-ab'>
     <img src="{% static '${fname}' %}" class='img-thumbnail'>
 </div>`
{% endverbatim %}

方式二：手动转义Django模板标签分隔符 #

将{%替换为{{ "{%" }}，%}替换为{{ "%}" }}，让Django渲染时输出原始的{%和%}字符，而不是解析标签。

修改后的代码：

var fname = 'pic.jpg';

`<div class='col-md-2 mb-2 posr'>
     <input type='checkbox' class='custom-control-input chk pos-ab'>
     <img src="{{ "{%" }} static '${fname}' {{ "%}" }}" class='img-thumbnail'>
 </div>`

两种方式都能让Django不解析{% static %}标签，同时保留JavaScript模板字符串的变量替换功能，最终JS执行后会生成正确的图片地址。

内容的提问来源于stack exchange，提问作者Naveed