Django项目中JavaScript文件引用的静态图片无法渲染问题求助

问题根源 #

Django 的 {% static %} 等模板标签仅会在服务端渲染的模板文件（后缀为.html的模板文件）中被解析替换为实际静态资源路径，独立的.js 文件不会经过 Django 模板引擎处理，因此 JS 内硬编码的资源路径无法匹配你配置的静态资源规则。

解决方案 #

方案1：模板内声明全局资源前缀，JS 直接调用

1. 在HTML模板的<head>标签内新增全局变量声明：

<script>
window.STATIC_URL = "{% get_static_prefix %}";
window.MEDIA_URL = "{% get_media_prefix %}";
</script>

2. 修改 project.js 内的资源路径写法：

const projects = [
  {
    title: "Discord App",
    // 若图片存放在staticfiles目录下，就使用window.STATIC_URL拼接
    // 若图片存放在MEDIA_ROOT对应目录下，就使用window.MEDIA_URL拼接
    cardImage: `${window.STATIC_URL}images/project-page/download.png`,
    description: "A Discord app.",
    tagimg: "https://cdn.iconscout.com/icon/free/png-512/react-1-282599.png",
    Previewlink: "",
  },
];

方案2：将带动态路径的逻辑移入模板文件

如果项目规模不大，可以直接把包含静态资源路径的JS代码写在HTML模板的<script>标签内，这样{% static %}标签就能被正常解析：

<script>
const projects = [
  {
    title: "Discord App",
    cardImage: "{% static 'images/project-page/download.png' %}",
    description: "A Discord app.",
    tagimg: "https://cdn.iconscout.com/icon/free/png-512/react-1-282599.png",
    Previewlink: "",
  },
];
</script>
<!-- 其余无动态资源路径的JS逻辑仍可通过独立文件正常引入 -->
<script src="{% static 'js/project.js'%}"></script>

补充配置检查 #

• 你当前的settings.py仅配置了MEDIA_URL，如果需要使用媒体资源存储，请补充MEDIA_ROOT配置：

MEDIA_ROOT = os.path.join(BASE_DIR, 'images')

• 开发环境下请在项目根urls.py中补充静态资源路由：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 原有路由规则
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

• 你引入JS的代码中{% static '/js/project.js'%}开头的斜杠可以移除，改为{% static 'js/project.js'%}，避免多余斜杠导致路径匹配错误。

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