如何在Node.js项目中读取JSON存储的图片路径并在React前端展示

问题原因 #

你的Express服务没有将存储图片的uploads目录设置为对外开放的静态资源目录，所以前端请求图片路径时，服务端会返回404状态码，导致图片无法加载。

解决方案 #

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

在你的Express项目入口文件（通常是app.js/server.js）中，在所有路由定义之前添加如下代码：

// 引入express模块（如果已经引入过就不用重复写）
const express = require('express');
const app = express();

// 新增这行代码，将uploads目录映射为静态资源目录
app.use('/uploads', express.static('uploads'));

这行配置的作用是：所有以/uploads开头的请求，都会自动到项目根目录的uploads文件夹下查找对应文件返回。
如果你的uploads目录不在项目启动的根目录，建议用绝对路径写法，更稳妥：

const path = require('path');
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

步骤2：验证配置是否生效 #

你可以直接把图片的完整路径（比如http://localhost:9000/uploads/background-1632727441391.jpeg）复制到浏览器地址栏访问，如果能正常显示图片，说明后端配置成功，前端原来的代码就可以正常加载图片了。

额外排查项 #

如果配置完还是无法显示，可以排查以下问题：

• 确认项目根目录下存在uploads文件夹，如果不存在需要手动创建，或者添加自动创建目录的逻辑，避免multer写入文件时报错。
• 如果你的前端和后端运行在不同端口（比如前端跑在3000端口，后端跑在9000端口），需要给后端配置CORS跨域，安装cors包后在入口文件添加配置：

  const cors = require('cors');
  app.use(cors());
  

• 建议优化图片存储逻辑，不要存完整带域名的路径，只存/uploads/xxx.jpeg这种相对路径，后续后端部署更换域名时不需要修改历史数据，适配性更强。

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