Django/React项目中API返回本地图片路径无法渲染如何解决

• 纯Django全栈模式下前后端服务运行在同一端口，Django默认会处理/media/路径下的静态资源请求，因此图片可正常加载。
• 前后端分离开发时，React开发服务默认运行在localhost:3000，Django后端默认运行在localhost:8000，接口返回的/media/xxx为相对路径，浏览器会默认向React所在的3000端口发起图片请求，自然无法命中Django本地存储的文件。

开发环境配置 #

1. Django侧配置 #

首先确认媒体文件相关配置正确：

1. 在settings.py中添加媒体文件路径配置：

   import os
   
   # 媒体文件访问URL前缀
   MEDIA_URL = '/media/'
   # 媒体文件本地存储的物理根路径
   MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
   

2. 修改StoreItems模型的ImageField配置，去掉upload_to参数里多余的./，避免路径拼接错误：

   image = models.ImageField(default='default.png', upload_to='product_pics')
   

3. 在项目根路由文件urls.py中添加开发环境的媒体文件路由映射：

   from django.conf import settings
   from django.conf.urls.static import static
   
   urlpatterns = [
       # 原有路由：admin、api路由等
   ]
   
   # DEBUG模式下启用媒体文件路由
   if settings.DEBUG:
       urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
   

2. React侧配置 #

两种实现方式二选一即可：

• 方式1：手动拼接完整后端地址
  渲染图片时，将接口返回的相对路径和Django后端服务地址拼接为完整URL即可，示例代码如下（写在ListItem组件中）：

  // 本地开发时Django默认运行在8000端口
  <img src={`http://localhost:8000${item.image}`} alt={item.name} />
  

  为了避免硬编码地址，可以在项目中统一抽离常量配置，后续切换环境只需要修改一处配置。

• 方式2：配置React开发代理
  在React项目的package.json文件中添加代理配置，将所有未匹配前端路由的请求自动转发到Django后端：

  {
    // 项目原有其他配置
    "proxy": "http://localhost:8000"
  }
  

  配置完成后重启React开发服务，此时直接使用接口返回的/media/xxx相对路径即可正常加载图片，和纯Django全栈的写法完全一致：

  <img src={item.image} alt={item.name} />
  

生产环境注意事项 #

生产环境不建议直接用Django处理媒体文件请求，性能较差，可选择以下方案：

• 用Nginx做反向代理，将/media/开头的请求直接映射到服务器上媒体文件的存储目录，由Nginx直接返回资源
• 将图片上传至第三方对象存储服务，数据库中直接存储图片的完整CDN访问地址，前端拿到地址后直接渲染即可

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