使用Django时，如何解决JavaScript动态添加img元素的路径问题？

我在用Django搭建网站，需要动态插入img元素，因图片经常变动，尝试从Python把图片src传递到JavaScript：

1. views.py 代码：

path='{% static "../static/assets/'+image_name+'" %}'
response = render(request, 'main.html',{'image_path':path})
return response

2. main.html 声明全局变量：

var imagePath = {{image_path|safe}}

遇到的问题：用JavaScript将该变量作为src创建新img元素时，Django无法找到图片；但手动将相同字符串设为img的src却能正常显示。

解决方法 #

核心问题是你在Python里直接拼接了Django模板标签字符串，这不会被模板引擎正确解析，导致传递给JS的是未处理的模板标签文本，而非实际可访问的图片URL。

正确实现步骤：

1. views.py 只传递图片文件名
   不要在后端拼接模板标签，仅把图片名称传给模板：

response = render(request, 'main.html', {'image_name': image_name})
return response

2. 在模板中用static标签生成有效URL后传给JS
   在main.html里，让Django模板引擎直接解析static标签生成完整URL，再赋值给JS变量（注意用引号包裹字符串）：

var imagePath = "{% static 'assets/' %}{{ image_name }}";

或者更简洁的写法：

var imagePath = "{{ static 'assets/'|add:image_name }}";

为什么之前的方法失效？

你在Python中拼接的{% static ... %}只是普通字符串，模板引擎不会二次解析这个已拼接好的内容，所以JS拿到的是{% static "../static/assets/xxx.jpg" %}这类无效文本，而非实际的http://xxx.com/static/assets/xxx.jpg格式的可访问URL。而手动写的时候，模板引擎会正常解析static标签生成有效路径，因此能显示图片。

额外注意事项

• 确保assets文件夹在Django配置的STATICFILES_DIRS目录，或者对应app的static子目录下，这样static标签才能正确定位文件。
• 如果是用户上传的动态图片（非静态资源），需改用MEDIA_URL和MEDIA_ROOT配置，在模板中通过{{ image_instance.url }}获取URL，而非static标签。

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