Django上传图片存入数据库后index.html无法正常加载显示问题

问题根本原因 #

你混淆了Django中静态文件（STATIC，用于存放css/js/站点固定图片等资源）和媒体文件（MEDIA，用于存放用户上传的文件）的配置逻辑，且调用方式、路由配置存在缺失。

第一步：修改settings.py配置 #

删除原有USERFILES_DIRS相关配置，添加媒体文件专属配置：

# 原有STATIC配置保留不变
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]
# 新增媒体文件配置
MEDIA_ROOT = os.path.join(BASE_DIR, 'upload')
MEDIA_URL = '/media/'

MEDIA_ROOT是用户上传文件的本地存储根路径，MEDIA_URL是访问媒体文件的URL前缀。

第二步：调整models.py字段参数 #

ImageField的upload_to参数是相对于MEDIA_ROOT的存储路径，你原来的配置会导致文件实际存储到BASE_DIR/upload/upload/目录下，和你预期的路径不符，修改为：

display_picture = models.ImageField(upload_to='', height_field=None,width_field=None, max_length=None)

如果需要分类存储，也可以设置为upload_to='shoes/'，文件就会存储到BASE_DIR/upload/shoes/目录下。
修改模型后记得执行makemigrations和migrate命令更新数据库配置。

第三步：添加媒体文件访问路由 #

打开项目根目录的urls.py，添加如下配置：

from django.conf import settings
from django.conf.urls.static import static

# 原有urlpatterns配置不变
urlpatterns = [
    # 你原来的路由配置
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

该配置仅在开发调试模式（DEBUG=True）下生效，生产环境需要通过Nginx/Apache等服务端软件配置媒体文件的访问规则。

第四步：修正模板中图片路径的调用方式 #

ImageField字段需要调用.url属性才能生成正确的访问路径，修改HTML模板代码：

<img src="{{x.display_picture.url}}" class="card-img-top" alt="...">

补充检查 #

如果修改后仍无法正常加载，确认你已经安装了Pillow依赖（Django处理图片字段的必备依赖）：

pip install Pillow

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