Django图片无法显示求助：路径缺失/media/前缀

问题现象 #

使用模型字段（如img.main_image）作为图片路径时，服务器启动后图片无法显示，排查发现生成的路径缺少/media/前缀；手动在模板中给{{img.main_image}}添加/media/前缀后，图片可正常显示。

现有代码 #

settings.py #

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')

# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

AUTH_USER_MODEL = 'authentication.CustomUser'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')

urls.py #

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('items.urls')),
    ]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    urlpatterns += static(settings.STATIC_URL, document_root=sett  # 此处代码截断

模板HTML #

<div class="main__column">
    <div class="main__item item">
        <div class="item__img">
            {% for img in p.image_set.all %}
            {{img.main_image}}
            <img src="{{img.main_image}}" alt="">
            {%endfor%}
        </div>
        <div class="item__body">
            <div class="item__name">{{p.name}}</div>
            <div class="item__descriptions">{{p.descriptions}}</div>
            <div class="item__price">{{p.price}}</div>
            <div class="item__in_stock">{{p.in_stock}}</div>
        </div>
    </div>
</div>

问题原因与解决方案 #

核心原因 #

Django的ImageField存储在数据库中的是相对MEDIA_ROOT的路径（如uploads/test.jpg），直接在模板中输出字段值时，只会返回这个相对路径，缺少MEDIA_URL（即/media/）前缀，导致浏览器无法正确定位到媒体文件的位置。

解决方案 #

1. 模板中使用.url属性
   将模板中的{{img.main_image}}替换为{{img.main_image.url}}，ImageField的url属性会自动拼接MEDIA_URL前缀，生成完整的可访问路径（如/media/uploads/test.jpg）。修改后的模板代码：

   <div class="item__img">
       {% for img in p.image_set.all %}
       {{img.main_image.url}}
       <img src="{{img.main_image.url}}" alt="">
       {%endfor%}
   </div>
   

2. 补全urls.py中截断的代码
   urls.py中静态文件路由的代码被截断，需要补全为：

   if settings.DEBUG:
       urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
       urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
   

   确保DEBUG模式下，Django能正确映射/media/和/static/路径到对应的本地目录。

3. 确认模型字段类型
   确保你的模型中main_image字段是ImageField类型，而非普通字符字段或FileField：

   from django.db import models
   
   class ItemImage(models.Model):
       p = models.ForeignKey('items.Item', on_delete=models.CASCADE)
       main_image = models.ImageField(upload_to='uploads/')  # upload_to定义存储子目录
   

内容的提问来源于stack exchange，提问作者Роман Мельничук