Django中FileField上传图片无法显示（404错误）求助

问题根源 #

你当前的配置存在几个核心问题：

• 错误地将用户上传的图片放到了static目录，Django中static用于存放项目自带的静态资源（如CSS、JS），用户上传的动态文件应该放在media目录。
• 模板中使用相对路径拼接图片URL，这种方式依赖页面URL层级，极易出错。
• 未配置Django的媒体文件服务路由，导致无法访问上传的文件。

分步解决方案 #

1. 修正模型字段配置

将img字段改为ImageField（专门用于图片，自带格式验证），并修改upload_to指向media目录下的子文件夹（无需手动创建，Django会自动生成）：

# models.py
from django.db import models
from django.contrib.auth.models import User

class CoachingProgram(models.Model):  # 类名建议采用大驼峰命名规范
    coach = models.ForeignKey(User, on_delete=models.CASCADE, related_name='coaching_programs')
    title = models.CharField(max_length=35, unique=True)
    description = models.CharField(max_length=120)
    price = models.DecimalField(max_digits=5, decimal_places=2, null=True, blank=True)
    text = models.FileField(upload_to='coaching/program_text/', null=True, blank=True)
    img = models.ImageField(upload_to='coaching/program_imgs/', null=True, blank=True)  # 修改为ImageField，简化upload_to路径

注意：使用ImageField需要安装Pillow库，执行pip install pillow即可。

2. 配置项目settings.py

添加媒体文件相关配置：

# settings.py
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

# 媒体文件配置
MEDIA_ROOT = BASE_DIR / 'media'  # 媒体文件的本地存储路径
MEDIA_URL = '/media/'  # 媒体文件的URL前缀

3. 配置项目urls.py

添加媒体文件的路由映射，让Django能正确解析媒体文件的URL：

# 项目根目录下的urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('fit.urls')),  # 假设你的app名为fit
]

# 仅在开发环境中添加媒体文件路由（生产环境需用nginx等服务器处理）
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

4. 修正模板中的图片引用

直接使用Django提供的{{ post.img.url }}获取图片的完整URL，无需手动拼接相对路径：

<!-- 模板文件 -->
{% for post in posts %}
    <div class="post">
        {{ post.img }}
        <img src="{{ post.img.url }}" alt="{{ post.title }}">  <!-- 使用url属性 -->
        <p>{{ post.title }}</p>
        <p>{{ post.price }}</p>
        <p>{{ post.description }}</p>
    </div>
{% endfor %}

5. 迁移数据库并重新上传图片

执行以下命令更新数据库结构：

python manage.py makemigrations
python manage.py migrate

然后通过Django admin重新上传图片（因为之前的图片存储路径已变更）。

验证 #

启动开发服务器后，访问页面查看图片是否正常显示。如果仍有问题，检查：

• 图片是否确实上传到了media/coaching/program_imgs/目录下
• 浏览器控制台中的图片请求URL是否正确（应该是http://localhost:8000/media/coaching/program_imgs/xxx.jpg这类格式）

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