Django FileField上传图片成功但模板无法加载显示问题求助

Django FileField上传图片路径重复导致无法加载问题解决方案 #

问题根因 #

保存图片时手动给文件路径拼接了media/前缀，而Django的FileField调用.url属性时会自动拼接配置的MEDIA_URL（即/media/），最终导致路径重复出现/media/media/xxx的错误格式。错误路径的资源不存在时，会触发登录校验中间件返回302跳转。

解决步骤 #

1. 修正模板图片引用写法
   FileField必须调用.url属性才能获取正确的资源访问路径，修改模板代码：

<!-- 错误写法 -->
<!-- <img src ="{{ student.profile_picture }}" style="width: 100px"> -->
<!-- 正确写法 -->
<img src ="{{ student.profile_picture.url }}" style="width: 100px">

2. 修正后台文件保存逻辑
   找到AddStudentSave、EditStudentSave视图函数，删除手动拼接media/前缀的逻辑，直接将文件对象赋值给字段即可，Django会自动处理路径存储：

# 错误逻辑示例（需要删除）
# profile_pic = request.FILES.get('profile_picture')
# file_path = f"media/{profile_pic.name}"
# student.profile_picture = file_path

# 正确写法
profile_pic = request.FILES.get('profile_picture')
if profile_pic:
    student.profile_picture = profile_pic
student.save()

3. 清理历史脏数据
   对于已经存入数据库的错误路径，直接修改students表profile_picture字段的值，删除开头的media/前缀即可，也可以重新上传图片覆盖旧数据。

4. 可选优化
   如果仅存储图片，建议用ImageField替代FileField，自动校验文件格式，同时增加upload_to参数分类存储文件：

# models.py中修改字段定义
profile_picture = models.ImageField(upload_to="student_profiles/")

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