Django项目media文件夹图片无法显示的问题求助

问题情况 #

在Django项目中尝试展示media文件夹内的图片，本地路径经os.path.exists()验证确实存在，但前端请求时返回404错误，日志显示请求的是本地绝对路径而非Django的媒体URL：

Not Found: /home/harish/Desktop/project/visual/media/section_1_2.png [07/May/2023 16:15:52] "GET /home/harish/Desktop/project/visual/media/section_1_2.png HTTP/1.1" 404 2490

现有配置与代码 #

settings.py #

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

STATUSFILES_DIRS = (
    os.path.join(BASE_DIR, 'static')
)

urls.py #

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.get_logfile_path, name = "input_log_file"),
    path('output/', views.graphs, name= 'graphs')
]

views.py #

for image in sec_1_image_names:
    sec_1_image_paths.append(os.path.join(output_plots,image))
 
# sec_1_image_paths示例输出
# ['/home/harish/Desktop/project/visual/media/section_1_4.png']
return render(request, 'output.html', {'image_urls':sec_1_image_paths})

output.html #

<!DOCTYPE html>
<html>
<head>
    <title>Image View</title>
</head>
<body>
    <h1>Images:</h1>
    {% for url in image_urls %}
      <img src="{{ url }}" />
    {% endfor %}
</body>
</html>

错误日志 #

"GET /home/harish/Desktop/project/visual/media/section_1_1.pn HTTP/1.1"   404 2490

解决步骤 #

问题根源在于两个点：视图传递了本地绝对路径而非媒体URL，且URL路由未配置媒体文件访问规则。

1. 修改视图，传递正确的媒体URL
   替换本地绝对路径为基于MEDIA_URL的相对路径，让前端能通过Django的媒体路由访问：

   from django.conf import settings
   
   for image in sec_1_image_names:
       # 拼接MEDIA_URL与图片文件名，生成前端可用的URL
       sec_1_image_paths.append(f"{settings.MEDIA_URL}{image}")
   
   return render(request, 'output.html', {'image_urls':sec_1_image_paths})
   

2. 配置URL路由，支持媒体文件访问
   在项目根urls.py中添加媒体文件的路由配置，开发环境下Django会自动处理这些请求：

   from django.conf import settings
   from django.conf.urls.static import static
   
   urlpatterns = [
       path('admin/', admin.site.urls),
       path('', views.get_logfile_path, name = "input_log_file"),
       path('output/', views.graphs, name= 'graphs')
   ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
   

3. 注意事项

   • static()方法仅在DEBUG=True的开发环境生效，生产环境需通过Nginx、Apache等Web服务器直接托管媒体文件目录
   • 确保output_plots对应的就是MEDIA_ROOT路径，若路径不同需调整拼接逻辑，保证图片文件名能正确匹配到MEDIA_ROOT下的文件

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