React配合Multer实现图片上传成功后前端无法渲染图片问题

核心问题 #

你当前使用的是后端本地文件的相对路径，React 运行在独立的前端服务（默认端口3000）上，浏览器没有权限直接读取后端服务的本地目录文件，所以路径看似正确也无法加载图片。

分步操作 #

• 第一步：后端配置静态资源托管
  在你的 Express 后端入口文件（通常为 app.js 或 index.js）中添加代码，将存储图片的 uploads 目录开放为可公开访问的静态资源目录：

  const express = require('express')
  const path = require('path')
  const app = express()
  
  // 新增静态资源托管配置，访问路径前缀为/uploads
  app.use('/uploads', express.static(path.join(__dirname, 'uploads')))
  

  配置完成后先做测试：直接在浏览器地址栏输入 http://localhost:4000/uploads/你的图片文件名，确认可以正常打开图片再继续下一步。

• 第二步：修改前端img标签的src属性
  不要使用相对路径，直接填写后端静态资源的完整访问路径，将原来的src替换为：

  src={`http://localhost:4000/uploads/${client.image}`}
  

  后续项目上线部署时，把 http://localhost:4000 替换为你的后端实际服务域名即可。

常见排查点 #

• 确认数据库中存储的 client.image 字段是图片的完整文件名，没有多余的路径前缀
• 上线后如果出现跨域问题，检查后端 cors 配置是否允许前端域名访问静态资源

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