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

这个问题和manifest配置、PWA相关设置没有任何关系，核心是两个配置错误：

• Django的ImageField字段默认返回的是/media/xxx/yyy.jpg格式的相对路径，直接将这个值传入img标签的src属性时，浏览器会默认从前端服务的域名下请求这个路径，根本没有访问到Django后端存储图片的媒体目录，请求返回的不是图片二进制内容，而是前端路由的HTML页面或者404响应，所以会显示破损图片占位符。
• 开发者工具资源列表里能看到对应请求记录，仅代表浏览器发起了资源请求，不代表请求返回了合法的图片内容，点进对应图片请求的响应面板就能看到实际返回的是HTML文本，不符合图片渲染要求。

分后端、前端两步调整即可：

第一步：修正Django媒体资源配置 #

• 打开Django项目的settings.py，确认媒体文件路径配置：

import os
# 媒体资源访问前缀
MEDIA_URL = '/media/'
# 媒体文件实际存储的本地目录
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

• 打开项目根目录的urls.py，添加开发环境下的媒体资源路由映射：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你原本配置的业务路由
]

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

注意：上述Django加static路由的方式仅适用于本地开发环境，生产环境要把media目录交给Nginx、Caddy这类Web服务器直接托管，不要让Django处理静态资源请求，否则性能会非常差。

第二步：修正前端图片路径拼接 #

• 原来的代码直接使用后端返回的相对路径，需要拼接上后端服务的域名前缀，找到组件中渲染图片的img标签，替换src属性逻辑：

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

• 验证方式：修改完成后复制一个拼接完成的图片地址直接在浏览器打开，能正常显示图片就说明路径配置正确，回到页面对应域名下刷新即可正常渲染所有图片。之前修改manifest.js的操作和本问题无关，不需要再调整相关配置。

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