Django模板中JS循环结合{% static %}生成动态图片路径的方法

DevOps 小满

2026-8-22

解决Django模板中JS动态修改静态图片路径的问题

核心原因

Django的{% static %}模板标签是服务器端渲染的，会在页面发送到浏览器前完成解析；而JS是客户端执行的，运行时模板标签已经无法再被解析。所以直接在JS代码里拼接{% static %}标签的写法完全无效。

可行解决方案

方案1：获取静态资源基础URL后拼接

先在模板中通过Django标签获取静态资源的根路径，再在JS里动态拼接图片文件名：

在模板的<script>标签中先渲染静态资源前缀：

<script>
// 由Django服务器解析生成静态资源的基础URL
const staticBaseUrl = "{% get_static_prefix %}";
</script>

修改JS逻辑，拼接完整图片路径：

let errorCount = 0;

if (matched) {
    errorCount++;
    // 拼接完整路径：基础URL + 图片相对路径
    const picturePath = `${staticBaseUrl}hangman_game/img/s${errorCount}.jpg`;
    document.getElementById("gallows").innerHTML = `<img src="${picturePath}" alt="" />`;
}

方案2：提前渲染图片前缀路径

如果只针对这一组图片，也可以直接渲染图片的固定前缀部分，再拼接序号：

在模板中渲染图片前缀：

<script>
// 由Django解析生成图片的固定前缀路径
const imagePrefix = "{% static 'hangman_game/img/s' %}";
</script>

JS中拼接完整路径：

let errorCount = 0;

if (matched) {
    errorCount++;
    const picturePath = `${imagePrefix}${errorCount}.jpg`;
    document.getElementById("gallows").innerHTML = `<img src="${picturePath}" alt="" />`;
}