Django如何正确将数据库关联的media目录图片显示到页面

你当前的问题由两个独立错误共同导致：

1. URL中出现的%27是单引号的URL编码结果，说明photo字段存储的文件名前后额外包裹了单引号，比如存成了'MyImg.jpg'而非正确的MyImg.jpg，直接导致路径匹配失败。
2. 模板中写死的相对路径media/{{item.photo}}会继承当前页面的路由前缀，由于你当前页面路由在/auto/路径下，最终会拼成/auto/media/xxx的错误路径，无法命中media目录的路由规则。

修复步骤 #

• 清理错误的存量数据
  检查数据库中photo字段的存储值，删除所有文件名前后多余的单引号。后续上传文件时不要手动给文件名添加引号包裹，Django的ImageField/FileField会自动存储正确的相对路径。
• 校验settings.py中的media配置
  确保配置文件中存在以下两个必填参数：

  # settings.py
  MEDIA_URL = '/media/'
  # 新版本Django写法
  MEDIA_ROOT = BASE_DIR / 'media'
  # 老版本Django可以替换为：
  # MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  

• 添加开发环境media路由映射
  开发模式下Django默认不会自动托管media目录的文件，需要在项目根路由文件中添加对应映射：

  # 项目根目录urls.py
  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns = [
      # 此处保留你原有的所有路由配置
  ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  

• 修正模板中的图片路径写法
  不要使用相对路径拼接，优先使用模型文件字段自带的url属性自动生成正确访问地址，替换原有img标签：

  <img src="{{ item.photo.url }}">
  

  如果需要手动拼接路径，必须在路径前加前导斜杠写为绝对路径，避免被当前路由前缀影响（不推荐该写法，容易出现配置不兼容问题）：

  <img src="/media/{{ item.photo }}">
  

注意：上述路由配置仅适用于本地开发环境，生产环境需要通过Nginx等Web服务器托管media目录文件，不要让Django直接处理静态资源请求。

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