Django模板如何将模型关联产品图片设为div的background URL

核心实现逻辑 #

{% static %}标签仅用于引用项目内置的固定静态资源，无法读取模型ImageField中存储的、用户上传的动态产品图片。要实现动态设置div的背景图，需要分两步操作：先完成Django的媒体文件基础配置，再替换模板中的静态资源引用逻辑。

第一步：补全媒体文件基础配置 #

当前settings.py仅配置了静态资源（STATIC）相关规则，但ImageField上传的文件属于用户动态上传的媒体资源，需要单独配置访问规则，否则模板中调用图片路径时会出现404。

• 在settings.py现有STATIC配置的下方追加媒体配置：

  # 用户上传媒体文件配置
  MEDIA_URL = '/media/'  # 浏览器访问上传文件的URL前缀
  MEDIA_ROOT = os.path.join(BASE_DIR, '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)
  

  注意：上述路由映射仅适用于本地开发环境，生产环境部署时需要由web服务器直接托管media目录，不需要保留这段开发用的映射代码。

第二步：修改模板中的背景图引用逻辑 #

在商品列表的循环中，每个product实例下的photo_main字段自带.url属性，直接返回上传图片的可访问路径，替换原来写死的{% static %}引用即可。
修改后的模板代码如下：

{% if products %}
  {% for product in products %}
    <div 
      class="product-grid" 
      style="background-image:url('{{ product.photo_main.url }}');"
    >
      <div class="inner">
        <p>
           <a href="{% url 'single_product' product.id %}" class="icon">
             <i class="icon-shopping-cart"></i>
           </a>
           <a href="{% url 'single_product' product.id %}" class="icon">
             <i class="icon-eye"></i>
           </a>
       </p>
      </div>
    </div>
    {{ product.title }}
    ${{ product.price }}
  {% endfor %}
{% endif %}

细节优化建议 #

• 给图片路径外侧包裹单引号，避免路径中包含空格、特殊字符时导致CSS解析失效
• 可以增加兜底逻辑：当产品没有上传主图时，自动加载默认占位图，避免无图时背景样式异常，示例写法：

  {% with bg_url=product.photo_main.url|default:'images/default-product.jpg' %}
  <div class="product-grid" style="background-image:url('{{ bg_url }}');">
  ...
  </div>
  {% endwith %}
  

• 原代码中商品详情链接没有传递产品ID参数，如果需要跳转到对应单品的详情页，记得在{% url %}标签中补充product.id参数，否则所有链接都会指向同一个固定页面。

常见踩坑提示 #

• 不要把用户上传的文件存放到static目录下，静态目录的设计是存储项目打包时自带的固定资源，混放会导致执行collectstatic命令时出现资源覆盖、路径混乱的问题
• 确认数据库中photo_main字段记录的文件路径，和本地media目录下的实际文件对应，否则即使配置正确，访问路径也会报404

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