Django模板插入ImageField图片无法正常显示问题求助

核心问题根因 #

你使用的带缩略图功能的轮播组件会优先读取li标签的data-thumb属性值作为图片加载路径，你只修改了img标签的src属性、未同步修改data-thumb属性的旧相对路径，导致组件加载资源失败。 #

具体解决步骤 #

• 第一步：修正模板所有关联路径
  将你原有car_detail.html中的li标签替换为以下代码：

<li data-thumb="{{ cars.image_main.url }}"> <a href="#"><img src="{{ cars.image_main.url }}" alt="{{ cars.brand }}" /></a> </li>

• 第二步：统一变量名
  你视图层传递的上下文键为cars，模板中统一使用{{ cars.image_main.url }}即可，之前尝试的{{ car.image_main.url }}无对应上下文数据，不会返回有效路径。
• 第三步：校验媒体资源配置（若单独测试图片也无法显示时排查）
  1. 确认settings.py中已配置媒体资源路径：

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

  2. 确认根路由urls.py中已添加开发环境媒体资源访问规则：

  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns = [
      # 原有路由规则
  ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  

内容的提问来源于stack exchange，提问作者nick.cmn