React.js无法显示从Django后端获取的图片问题

• 核心原因是路径解析错误：接口返回的photo字段是Django媒体文件的相对路径，当前React前端运行在localhost:3000，直接将相对路径赋值给img的src属性时，浏览器会默认从前端服务域名下请求资源，也就是请求http://localhost:3000/media/partners/2022/06/07/uk.png，但媒体资源实际存储在Django后端服务下，路径不匹配自然无法加载。
• 控制台的manifest图标报错属于独立的PWA配置残留问题，和业务图片加载失败没有关联，即使移除manifest里的图标引用，只要不修正媒体资源路径，业务图片依然无法正常展示。
• 额外代码细节问题：当前遍历languageCenters时使用map方法做push操作属于语法误用，map本身会返回遍历后的新数组，这种只做循环操作不使用返回值的场景用forEach更合适，不过这个问题不会影响图片渲染。

1. 拼接完整的图片资源地址
   利用已配置的后端地址环境变量，将后端域名和接口返回的相对路径拼接为绝对路径，修改img标签的src属性：

   <img 
     className='school__display__image' 
     src={`${process.env.REACT_APP_API_URL}${languageCenter.photo}`} 
     alt='school logo' 
   />
   

   举个例子，如果你的REACT_APP_API_URL配置为http://localhost:8000，拼接后最终的资源地址就是http://localhost:8000/media/partners/2022/06/07/uk.png，会直接请求Django服务上的对应媒体资源。

2. 确认Django端媒体资源配置正确
   路径拼接正确后如果仍无法加载，需要检查Django配置：

   • 开发环境下需要在项目urls.py中添加媒体资源路由映射：

     from django.conf import settings
     from django.conf.urls.static import static
     
     urlpatterns = [
         # 原有业务路由
     ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
     

   • 确认settings.py中媒体相关配置正确：

     MEDIA_URL = '/media/'
     MEDIA_ROOT = BASE_DIR / 'media'
     

3. 清除manifest残留报错
   如果项目不需要PWA能力，直接删除public/index.html中引入manifest的标签<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />即可，不需要单独修改manifest内的图标配置，移除引用后就不会再出现图标加载报错。

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