Django中使用JavaScript修改图片src路径异常问题求助

问题还原 #

项目结构：

Root/
   Project/
     Templates/
        games/
           game-one.html
     static/
         pre-dev/
            behav.js
            seven.png

在behav.js中设置图片路径：

document.getElementById('img_eight').src = "static/pre-dev/seven.png"

实际生成的路径变成了https://website.com/pre-dev/static/pre-dev/seven.png，无论修改src的值都会自动添加/pre-dev/前缀，需要保留现有文件位置解决该问题。

可行解决方案 #

方案1：使用绝对路径 #

直接在路径前加上根目录标识/，让路径从网站根目录开始解析，避免基于JS文件所在目录的相对路径拼接：

document.getElementById('img_eight').src = "/static/pre-dev/seven.png"

方案2：通过HTML传递Django静态根路径 #

利用HTML中可以使用Django模板标签的特性，先在game-one.html中定义全局变量存储静态文件根路径，再在JS中引用：

1. 在game-one.html的<head>或JS引入前添加：

<script>
// 用Django静态标签获取根路径
const STATIC_BASE_URL = "{% static '' %}";
</script>

2. 修改behav.js中的代码：

document.getElementById('img_eight').src = STATIC_BASE_URL + "pre-dev/seven.png";

这种方式更灵活，适配Django的静态文件配置，不用硬编码根路径。

方案3：检查静态文件配置（辅助排查） #

确认Django项目settings.py中的STATIC_URL配置是否为'/static/'，如果配置错误也可能导致路径异常：

STATIC_URL = '/static/'

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