Django媒体文件配置异常：图片加载出现404未找到错误

现有配置 #

settings.py 配置 #

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

模板（HomePage.html）代码 #

<img src="{{ MEDIA_URL }}image.png" alt="Uploaded Image" style="max-width: 100%; height: auto;">

HomePage应用urls.py配置 #

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

报错信息 #

Not Found: /graph/upload/image.png

项目目录结构 #

--App
----settings.py 
--HomePage 
----HomePage.html 
----urls.py
--media 
----graph 
------upload 
--------image.png

问题分析与解决步骤 #

1. 修正模板路径：当前模板中写的{{ MEDIA_URL }}image.png与实际文件路径不匹配，正确路径应为{{ MEDIA_URL }}graph/upload/image.png。浏览器请求的/graph/upload/image.png缺少/media/前缀，要么是路径写错，要么是MEDIA_URL未在模板中生效。

2. 确认MEDIA_URL上下文生效：

   • 检查settings.TEMPLATES['OPTIONS']['context_processors']是否包含django.template.context_processors.media（默认已包含），确保模板能直接调用{{ MEDIA_URL }}。
   • 若使用函数视图，需在render时手动传入上下文：render(request, 'HomePage.html', {'MEDIA_URL': settings.MEDIA_URL})；类视图需确保在get_context_data中添加该变量。

3. 检查URL路由配置：

   • 确保HomePage的urls.py顶部导入了必要模块：from django.conf import settings和from django.conf.urls.static import static。
   • 确认HomePage的urls.py已被包含到项目根urls.py中，否则媒体文件的路由规则不会生效。

4. 验证MEDIA_ROOT路径正确性：

   • 运行python manage.py shell，执行以下命令确认路径：

     import os
     from django.conf import settings
     print(settings.MEDIA_ROOT)
     

   • 输出路径需与项目中实际的media目录绝对路径一致，避免BASE_DIR计算错误。

5. 硬编码测试排查：

   • 模板中直接写<img src="/media/graph/upload/image.png" ...>测试是否能加载。若成功，说明是模板上下文问题；若失败，检查文件权限（确保media目录及图片文件有可读权限）或路由配置遗漏。

内容的提问来源于stack exchange，提问作者Lance Van Elzen