Django媒体文件HTML无法显示，报404错误求助

我正在构建一个需使用媒体文件的Django项目，复用了之前可正常运行项目的全部配置，能通过Admin页面上传并选择图片，但图片无法在HTML页面显示。尝试了三种img路径写法：

<img src="/media/{{ KITAP.foto }}" alt="" class="rounded-t-lg">
<img src="/media/{{ KITAP.foto.url }}" alt="" class="rounded-t-lg">
<img src="{{ KITAP.foto.url }}" alt="" class="rounded-t-lg">

均出现错误：GET /media/ HTTP/1.1" 404 2679 或 Not Found: /foto/。

相关代码 #

视图代码 #

def index(request):
    dergi = Dergi.objects.all()
    kitap = Kitap.objects.all()
    yazar = Yazar.objects.all()
    siir = Siir.objects.all()

    template = loader.get_template("index.html")
    context={
        "DERGI":dergi,
        "KITAP":kitap,
        "YAZAR":yazar,
        "SIIR":siir,
    }
    return HttpResponse(template.render(context, request))

模型代码 #

class Kitap(models.Model):
    isim = models.CharField(max_length=255)
    yazar = models.CharField(max_length=255)
    foto = models.ImageField(upload_to="foto", null=True)

URL配置 #

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

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

settings配置 #

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

解决步骤 #

1. 修正模板遍历逻辑
   视图中KITAP是Kitap.objects.all()返回的查询集（多个对象），模板直接调用{{ KITAP.foto.url }}会导致路径错误。必须遍历每个对象：

   {% for kitap in KITAP %}
       {% if kitap.foto %}
           <img src="{{ kitap.foto.url }}" alt="{{ kitap.isim }}" class="rounded-t-lg">
       {% else %}
           <!-- 可选：添加默认图片占位 -->
           <img src="/static/default-book.jpg" alt="无封面" class="rounded-t-lg">
       {% endif %}
   {% endfor %}
   

   如果只需显示单个书籍对象，视图中需改为获取单个实例：

   kitap = Kitap.objects.get(pk=1)  # 替换为实际主键或查询条件
   

2. 验证文件上传路径
   确认上传的图片是否存在于项目根目录的media/foto/下（因为upload_to="foto"指定了子目录），如果目录不存在，Django会自动创建，但需确保项目有写入权限。

3. 确认媒体URL配置有效性
   确保static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)配置在项目根URLconf中，且当前处于DEBUG=True的开发环境（生产环境需通过Web服务器配置媒体文件路由）。

4. 处理空图片字段
   由于foto字段设置了null=True，模板中需先判断图片是否存在，避免因字段为空导致的URL错误。

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