Django HTML模板中for循环动态渲染静态图片问题求解

问题根因 #

你代码的核心错误是在{% static %}模板标签的参数内部嵌套了{{ }}变量输出语法，Django不支持模板标签参数内嵌套双大括号，因此你的图片路径最终会被解析为包含{{ plant.name }}字面量的无效路径，无法匹配到实际图片文件。硬编码文件名时没有变量嵌套逻辑，因此可以正常访问。

解决方法 #

方法1：修改路径拼接逻辑（适配你现有写法） #

使用Django模板的add过滤器拼接完整的相对路径，再传入static标签即可：

<ul>
    Plants:
    {% for plant in plants %}
        <li> <img src="{% static 'plant_photos/'|add:plant.name|add:'.jpg' %}"> {{ plant.name }}</li>
    {% endfor %}
 </ul>

注意：确保模板顶部已经声明加载static标签{% load static %}，且plant.name的取值和文件名大小写、字符完全一致，没有空格或特殊字符

方法2：直接使用模型的ImageField字段（更规范） #

你在Plant模型中已经定义了plant_image图片字段，无需手动拼接路径，直接调用字段的url属性即可：

<ul>
    Plants:
    {% for plant in plants %}
        <li> <img src="{{ plant.plant_image.url }}"> {{ plant.name }}</li>
    {% endfor %}
 </ul>

使用该方法需要确保你的项目已经正确配置MEDIA_URL、MEDIA_ROOT，且开发环境下urls.py中已经添加了MEDIA资源的访问路由

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