如何向Django模板注入带静态文件引用的HTML代码

AI 小北

2026-10-14

Django 动态生成DOM时静态图片加载失败的解决方案

问题根因

Django 的模板引擎仅会解析templates目录下的模板文件（通常为.html后缀），独立的.js静态文件不会被模板引擎渲染，因此直接在JS代码中写入{% static %}等模板标签不会被替换为实际的静态资源路径，导致图片404。

推荐方案

方案1：全局声明静态资源前缀（适用多页面、多JS文件引用静态资源的场景）

第一步：在项目公共基础模板（通常为base.html）的head标签内加入全局变量定义，提前注入静态资源根路径：

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

第二步：后续所有JS代码（无论是内联在HTML中还是独立的.js文件）都可以直接拼接路径使用：

function add_row(){
   const imgSrc = `${window.STATIC_URL}path/to/my/file.png`;
   const row_html = `<tr><td><img src="${imgSrc}"></td></tr>`;
   $('#table-id').append(row_html);
}

优势：全局仅需定义一次，所有业务代码均可复用，维护成本低。

方案2：通过DOM元素的data属性传递路径（适用单页面、路径仅当前页面使用的场景）

第一步：在当前HTML模板的触发元素上添加data属性存储完整的图片路径：

<button id="addRowBtn" data-img-src="{% static 'path/to/my/file.png' %}">添加行</button>

第二步：JS代码直接读取属性值即可：

function add_row(){
   const imgSrc = $('#addRowBtn').data('img-src');
   const row_html = `<tr><td><img src="${imgSrc}"></td></tr>`;
   $('#table-id').append(row_html);
}