使用Django模板标签渲染HTML模板图片失败，求排查代码问题

你的代码存在几个关键问题，导致图片无法加载：

1. 路径分隔符错误 #

你在views.py里用了Windows风格的反斜杠\，但HTML中的URL路径必须用正斜杠/。反斜杠会被浏览器解析为转义字符，导致路径识别错误。

2. 未使用Django静态文件标签生成正确URL #

直接传递相对路径给模板，浏览器无法正确映射到Django的静态文件服务路径。必须使用{% static %}模板标签来生成符合Django静态文件配置的URL。

修正步骤 #

步骤1：修改视图中的路径分隔符 #

把views.py里的路径改成正斜杠：

def image_gallery(request):
    image_urls = ['images/filter.JPG', 'images/logo1.png', 'images/profile1.jpg']
    return render(request, 'myapp/image_gallery.html', {'image_urls': image_urls})

步骤2：在模板中使用static标签 #

确保模板顶部已经加载static标签，然后修改<img>的src属性：

{% load static %}
{% for image_url in image_urls %}
    <img src="{% static image_url %}" alt="Image">
{% endfor %}

步骤3：确认静态文件目录配置 #

1. 确保你的图片文件放在正确的静态目录下：比如myapp/static/images/（每个Django app的静态文件默认可放在app/static/下的子目录中）。
2. 检查settings.py中的静态文件配置，确保以下内容存在：

STATIC_URL = '/static/'

# 如果你的静态文件不在app的static目录下，需要添加STATICFILES_DIRS
# STATICFILES_DIRS = [
#     BASE_DIR / "static",
# ]

额外检查点 #

• 确认图片文件名的大小写：Windows文件名不区分大小写，但服务器（如Linux）区分，确保模板中的文件名和实际文件完全一致。
• 生产环境下需要运行python manage.py collectstatic来收集静态文件，开发环境Django会自动处理。

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