Django模板加载图片时src自动拼接视图路径导致加载失败如何解决

这个路径拼接问题是使用相对路径导致的：images/item.jpg这类无前缀的路径，浏览器会自动将其和当前页面的URL路径拼接后发起请求，不同视图对应URL前缀不同，自然就会生成不同的错误路径。

Django场景下推荐以下几种标准修复方案：

• 方法1：快速修复，加根路径前缀
  给图片路径最前面加斜杠/，改成/images/item.jpg，浏览器就会基于站点根域名拼接路径，不会携带当前页面的URL前缀。如果item.pic存储的是不带斜杠的相对路径，直接在模板里修改代码即可：

  <img src="/{{ item.pic }}">
  

  注意如果你的Django站点不是部署在域名根路径下（比如部署在https://example.com/myblog/），该方法不适用，推荐使用下面的方法2。

• 方法2：使用Django内置静态资源标签（最规范）
  如果图片属于站点静态资源，直接用Django内置的static标签处理路径，会自动适配你的静态资源配置，不会出现路径拼接错误。
  首先确保模板顶部加载了静态资源标签：

  {% load static %}
  

  再修改图片引用代码：

  <img src="{% static item.pic %}">
  

  该方法会自动根据settings.py里的STATIC_URL配置生成正确路径，本地开发、生产部署、非根路径部署场景都能正常工作。

• 方法3：模型层处理完整路径（适合用户上传的媒体资源）
  如果图片是用户上传的媒体文件，不要存储相对路径，在模型层封装属性自动拼接MEDIA_URL前缀即可，示例代码如下：

  from django.db import models
  from django.conf import settings
  
  class Item(models.Model):
      pic = models.ImageField(upload_to="images/")
      
      @property
      def pic_url(self):
          return f"{settings.MEDIA_URL}{self.pic}"
  

  模板里直接调用封装好的属性即可：

  <img src="{{ item.pic_url }}">
  

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