jQuery动态获取图片路径传入img src的实现问题及Django相关咨询

核心错误定位 #

• HTML属性解析规则限制：src是img标签的纯文本属性，浏览器解析属性值时不会把嵌套在值里的任何HTML标签（包括写入的<span>）识别为真实DOM节点，最终发起的图片请求路径会是字面量字符串/media/<span id=image></span>，属于完全无效的路径，根本无法匹配到实际文件。
• DOM关联逻辑断裂：即使jQuery正确把获取到的文件名赋值给了span的文本内容，span本身也不在src属性的解析链路里，二者没有任何关联，自然无法实现路径替换。
• 无效冗余代码：现有jQuery代码中定义的csrf变量没有被实际调用，属于无意义的冗余逻辑。

通用实现方案 #

跳过错误的span嵌套思路，直接通过jQuery操作img标签的src属性完成路径赋值即可：

1. 调整HTML结构：给需要展示的img标签绑定专属id，删掉之前错误嵌在src里的span元素，初始src可以留空或者设置默认占位图。修改后的img结构示例：

<img id="scanned_img" class="card-img img-fluid mb-1" src="" alt="Card image cap" style="width: 900px;height: 600px;">

2. 调整jQuery逻辑：直接读取a标签上的文件名，拼接完整媒体路径后赋值给img的src属性，修改后的代码示例：

$(document).on('click', 'a[data-role=show_scanned]', function(){
    var fileName = $(this).attr('id');
    // 拼接完整图片路径，直接修改img的src属性
    $("#scanned_img").attr('src', `/media/${fileName}`);
    $("#scanned_show").modal('show');
});

Django框架下的优化捷径 #

• 避免硬编码媒体路径：在模板渲染阶段把Django配置的MEDIA_URL值渲染到img的初始src上，不用在JS里手动拼接/media/前缀，多环境部署时不会出现路径不匹配的问题。修改后img的初始标签为<img id="scanned_img" class="card-img img-fluid mb-1" src="{{ MEDIA_URL }}" alt="Card image cap" style="width: 900px;height: 600px;">，JS里只需要把文件名拼在已有的src后面即可。
• 优化路径存储方式：不要把文件名塞在a标签的id属性里，改用HTML自定义属性存储完整的图片URL。模板渲染时可以直接调用图片字段自带的url属性生成完整合法路径，避免特殊文件名的转义问题，比如a标签写为<a data-role="show_scanned" data-img-url="{{ 图片对象.url }}">展示扫描件</a>，JS里直接读取data-img-url的值赋值给img的src即可，完全不需要手动拼接路径。

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