Reactjs项目无法展示后端接口返回的图片资源问题求助

问题根因 #

• 后端返回的图片路径是Windows系统下的反斜杠分隔格式，浏览器无法正常识别
• uploads目录未被托管为静态资源，前端无法直接通过相对路径访问项目根目录下的uploads文件夹
• 前端img标签的src路径未补全服务端地址，相对路径默认指向的是前端打包后的静态资源目录，和实际图片存放位置不匹配

具体解决步骤 #

步骤1：后端配置静态资源托管 #

如果你的后端使用Express框架，在服务端入口文件（比如app.js/server.js）添加如下代码，把uploads目录托管为可公开访问的静态资源：

const express = require('express')
const app = express()
// 新增该行配置，托管uploads目录
app.use('/uploads', express.static('uploads'))

步骤2：前端处理图片路径 #

修改People.js组件里的img标签src属性，先把路径里的反斜杠替换为浏览器可识别的正斜杠，再补全后端服务的地址（示例中http://localhost:5000请替换为你实际的后端服务地址）：

// 将原img标签替换为以下代码
<img 
  src={`http://localhost:5000/${people.profile.replace(/\\/g, '/')}`} 
  alt={people.name}
  style={{width: '30px', height: '30px'}}
/>

如果你的React项目在package.json中配置了proxy代理指向后端服务，也可以省略域名，直接写：

src={`/${people.profile.replace(/\\/g, '/')}`}

可选优化 #

可以在后端接口返回数据时，统一把路径里的反斜杠替换为正斜杠，并且拼接完整的服务端前缀，前端无需额外处理直接使用返回的路径即可。

内容的提问来源于stack exchange，提问作者Puneeth R Gowda