Django如何在模板中使用已上传文件并关联模型对应图片？

你当前admin后台的上传展示效果如下：

本地开发阶段存在本地的图片，按下面步骤配置即可正常生成访问链接、在模板中调用：

1. 配置开发环境媒体文件访问规则 #

首先要让Django识别本地存储的上传文件的访问路径，先修改项目的settings.py文件：

• 配置媒体文件访问前缀和本地存储路径：

import os

# 浏览器访问上传文件的URL前缀
MEDIA_URL = '/media/'
# 上传文件在本地的实际存放根路径，对应项目根目录下的media文件夹
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

配置完成后手动在项目根目录新建名为media的文件夹，后续所有上传的文件都会存在这个目录下。

之后修改项目根目录的urls.py，添加开发环境的媒体文件路由映射，否则访问图片会返回404：

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

urlpatterns = [
    # 保留原有路由配置，比如admin路由、各app的业务路由
    # path('admin/', admin.site.urls),
]
# 该配置仅适用于开发环境，正式上线需要交给Nginx等Web服务器处理媒体文件映射
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

2. 确认模型字段配置 #

使用ModelForm实现上传时，模型里的图片字段一般为ImageField类型，参考写法如下（你在admin后台能正常上传说明这部分配置已经正确）：

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=100)
    # upload_to参数指定文件存放在MEDIA_ROOT下的子目录，示例中文件会存在media/post_covers/路径下
    cover_img = models.ImageField(upload_to='post_covers/')

ImageField类型的字段，在实例化后自带url属性，直接调用即可拿到可访问的图片链接，不需要手动拼接路径。

3. 模板中调用关联图片 #

首先在视图层把要展示的模型对象/对象列表传递给模板，参考函数视图写法：

from django.shortcuts import render
from .models import Post

def post_list(request):
    posts = Post.objects.all()
    return render(request, 'post_list.html', {'posts': posts})

模板中直接取字段的url属性作为img标签的src即可，注意要加非空判断，避免对象未上传图片时触发报错：

单对象图片展示 #

<!-- 详情页单张配图展示 -->
{% if post.cover_img %}
<img src="{{ post.cover_img.url }}" alt="{{ post.title }}" style="max-width: 600px;">
{% else %}
<p>该内容未上传配图</p>
{% endif %}

列表循环展示多对象图片 #

<!-- 列表页循环展示所有对象的配图 -->
<div class="post-list">
{% for post in posts %}
<div class="post-item">
    <h4>{{ post.title }}</h4>
    {% if post.cover_img %}
    <img src="{{ post.cover_img.url }}" alt="{{ post.title }}" width="200">
    {% endif %}
</div>
{% endfor %}
</div>

模板渲染后{{ post.cover_img.url }}会自动生成类似/media/post_covers/xxx.jpg的可访问相对路径，直接就能加载出对应图片。

4. 常见问题排查 #

• 访问图片返回404：优先检查urls.py里是否添加了static媒体路由，再确认MEDIA_ROOT路径配置正确，对应media文件夹和子目录真实存在。
• 模板渲染报属性不存在类错误：基本是没加非空判断，对象没有上传图片时字段值为空，直接调用.url就会报错，必须加if判断字段是否有值。
• Admin后台能看到图片预览但前台加载失败：检查MEDIA_URL的斜杠是否正确，必须以斜杠开头，即写成/media/，不要漏写开头的斜杠。

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