Django如何将数据库存储的图片在HTML页面中正常显示

核心原因：开发环境未配置媒体文件（Media）访问映射，且模板未正确引用图片资源URL，导致浏览器无法定位到存储的图片文件。

1. 配置settings.py媒体文件参数 #

在项目的settings.py文件末尾添加以下配置，定义媒体文件的访问前缀和本地存储路径：

# 媒体文件的浏览器访问URL前缀
MEDIA_URL = '/media/'

# 媒体文件在服务器本地的实际存储根路径
import os
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

配置后，模型中upload_to='image/'指定的上传文件，会自动保存到项目根目录/media/image/路径下。

2. 配置开发环境媒体路由 #

打开项目根目录下的全局路由文件urls.py，添加媒体文件的路由映射，让Django在开发模式下能响应媒体资源请求：
首先导入依赖配置：

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

在原有路由列表末尾拼接媒体路由规则：

urlpatterns = [
    # 你原有定义的所有路由，例如：
    # path('admin/', admin.site.urls),
    # path('', homepage, name='homepage'),
]

# 仅开发环境DEBUG=True时生效，生产环境需用Nginx等Web服务托管媒体文件
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3. 修正模板中图片引用方式 #

原模板直接输出banner.banner拿到的是ImageField对象的字符串描述，不是可访问的资源路径，需要调用.url属性拿到正确的访问地址，修改模板中img标签的src属性：

{% for banner in banners %}
<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img class="d-block w-100" src="{{ banner.banner.url }}" style="width:100%" alt="{{ banner.title }}">
  <div class="text">{{banner.title}}</div>
</div>
{% endfor %}

4. 异常排查点 #

• 确认当前运行环境DEBUG=True，上述静态路由方法仅适用于开发调试
• 确认数据库中存储的banner字段值格式为image/xxx.jpg这类相对路径，无多余的域名或前缀
• 确认media/image/目录下存在对应上传的图片文件，若配置前上传的文件存储位置错误，重新上传对应Banner即可正常加载

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