如何在Django中为setAttribute传递正确的图片路径？

问题根源很明确：Django的{% static %}模板标签是服务器渲染页面时解析的，而你这段点击事件的JS代码是在浏览器端触发后才执行的，服务器根本没机会处理JS字符串里的模板标签，所以它会原封不动地输出到HTML里。

下面给你几个靠谱的解决办法：

方法一：提前在模板中定义静态路径变量 #

在页面的模板文件里，先通过{% static %}生成正确的路径，把它存在全局变量里，之后JS直接调用这个变量就行：

1. 在模板的<script>标签里（要放在你的点击事件JS之前）添加：

<script>
// 提前把静态路径存在全局变量中
const confirmIconUrl = "{% static 'images/confirm.svg' %}";
</script>

2. 修改你的JS代码，直接用这个变量：

img.setAttribute("src", confirmIconUrl);

方法二：把JS代码内嵌到模板文件中（仅适用于非外部JS文件） #

如果你的这段JS是直接写在Django模板文件的<script>标签里（不是单独的.js外部文件），可以直接把{% static %}写在JS代码里，服务器渲染时会自动解析：

test.addEventListener('click',function(e){
    // 其他代码不变
    img.setAttribute("src", "{% static 'images/confirm.svg' %}");
    input.parentElement.append(img);
})

注意：如果JS是外部文件，Django不会解析外部文件里的模板标签，这种方法就无效，得用方法一。

方法三：直接使用完整静态路径（不推荐，灵活性差） #

如果你的STATIC_URL配置的是/static/，可以直接写完整路径，但如果之后修改了STATIC_URL配置，所有写死的路径都要手动修改，所以不推荐：

img.setAttribute("src", "/static/images/confirm.svg");

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