Django项目中如何正确展示数据库内存储的图片

模板中直接写{{pic}}时，Django会默认调用模型类的__str__方法，将对象转为你定义的name字段字符串输出，无法渲染图片。__str__方法仅用于返回对象的可读字符串标识，不适合输出富内容、HTML元素这类非纯字符串内容，模板渲染时直接读取对应字段属性即可。

1. 配置媒体文件访问规则 #

Django默认不会处理上传的媒体文件路由，需要先做基础配置：

• 在项目settings.py末尾添加配置：

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

配置后所有通过ImageField上传的文件都会存到项目根目录的media/images/路径下，访问路径前缀为/media/。

• 在项目主路由文件urls.py中添加开发环境的媒体文件服务配置：

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

urlpatterns = [
    # 你原本的其他路由配置
]
# 开发环境下添加媒体文件路由，生产环境需要用nginx等web服务器处理
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

如果还没安装Pillow依赖，先执行pip install pillow，否则ImageField无法正常工作。

2. 修正模板代码 #

你当前的house.html存在标签语法错误，且没有正确取图片字段的访问地址，修改为：

<h1>This is the House Page</h1>

{% for pic in pic %}
<div>
  <p>图片名称：{{ pic.name }}</p>
  <p>描述：{{ pic.description }}</p>
  <!-- ImageField的url属性就是图片可直接访问的路径 -->
  <img src="{{ pic.file.url }}" alt="{{ pic.name }}">
</div>
{% endfor %}

不要直接把模型对象传给img标签的src属性，必须通过模型实例.ImageField字段名.url拿到图片的真实访问地址。

3. 修正上传视图逻辑 #

你当前的上传视图存在两个问题：一是错误从request.POST取文件数据，上传的文件存在request.FILES中；二是上传成功后直接把单个图片对象传给列表页模板，和模板需要的图片列表queryset不匹配，且直接render会导致刷新页面重复提交表单。修改为：

from django.shortcuts import redirect

def imgUpload(request):
    if request.method == 'POST':
        form = ImageForm(request.POST, request.FILES)
        if form.is_valid():
            # 表单验证通过后直接保存即可，不需要手动取字段create对象
            form.save()
            # 重定向到图片列表页，由House视图查询所有图片数据传给模板
            return redirect('house') # 这里替换成你House页面对应的路由别名或访问路径
    else:
        form = ImageForm()
    return render(request, 'fileupload.html', {'form': form})

修改完成后重启服务，上传图片后就能在列表页正常渲染图片了。

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