如何通过循环将Django视图中的图片加载到HTML模板

• 先确认模板开头加载了static标签
  所有用到{% static %}的模板，必须在最顶部加上这句，否则相关语法不生效：

  {% load static %}
  

• 根据img属性的存储内容选对应写法
  分两种场景：

  1. 若img存的是完整静态路径（比如img/pic01.jpg），直接用：

     {% for image in pictures %}
       <div>
         <h3>{{ image.name }}</h3>
         <p>{{ image.image_description }}</p>
         <img src="{% static image.img %}" alt="{{ image.name }}">
       </div>
     {% endfor %}
     

  2. 若img只存了文件名（比如pic01.jpg），用模板过滤器add拼接路径：

     {% for image in pictures %}
       <div>
         <h3>{{ image.name }}</h3>
         <p>{{ image.image_description }}</p>
         <img src="{% static 'img/'|add:image.img %}" alt="{{ image.name }}">
       </div>
     {% endfor %}
     

• 排查常见坑点

  • 核对文件路径：确保图片确实在static/img/目录下，文件名和img属性值完全一致（注意Linux系统区分大小写）。
  • 确认视图传参正确：比如视图里是return render(request, 'your_template.html', {'pictures': Pictures.objects.all()})，模板循环变量要和pictures对应。
  • 别用字符串拼接路径（比如{{ baseUrl }}/{{ image.img }}），这种写法会绕过Django静态文件的哈希处理，可能导致路径无效或缓存问题。

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