如何在Django的HTML模板中显示media目录下的图片？

1. 先确认模板上下文处理器配置 #

打开settings.py，找到TEMPLATES配置块，得把django.template.context_processors.media加到context_processors列表里，不然模板里拿不到MEDIA_URL变量：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                # 其他已有的处理器
                'django.template.context_processors.media',
            ],
        },
    },
]

2. 模板里正确用MEDIA_URL #

配置好上面的之后，模板里直接用{{ MEDIA_URL }}拼图片路径就行：

<!-- 单张图片写法 -->
<img src="{{ MEDIA_URL }}img/profile/8.jpg" alt="用户头像">

3. 循环展示的场景 #

如果是从模型里取图片（比如模型定义了image = models.ImageField(upload_to='img/profile/')），直接用模型实例的image.url就行，Django会自动拼好完整路径，不用自己手动加MEDIA_URL：

<!-- 循环展示示例 -->
{% for user in user_list %}
    <img src="{{ user.image.url }}" alt="{{ user.username }}的头像">
{% endfor %}

4. 开发环境的URL配置要到位 #

检查urls.py里有没有加媒体文件的访问路由，开发环境靠这个才能访问到媒体文件：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你的其他路由
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

注意：这个配置只在开发环境用，生产环境得用Nginx或者Apache这类服务器来处理媒体文件的静态访问。

几个容易踩坑的地方 #

• MEDIA_URL的末尾要加斜杠，比如设成MEDIA_URL = '/media/'，不然拼接路径的时候会出问题。
• 确认模型里ImageField的upload_to参数设置对了，上传的图片确实存在MEDIA_ROOT对应的文件夹里。
• 有时候浏览器缓存会搞事情，清一下缓存再试试。

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