Express/Node后端图片配置问题：React前端无法显示图片

• 修正静态资源目录路径
  你的图片存在server/data/public/images，但当前app.use(express.static('public'))的路径是相对启动目录的，大概率没指向正确的public文件夹。改成绝对路径才能确保Express找到静态资源：

  const path = require('path');
  // 假设你的Node入口文件在server目录下，用path.join拼接绝对路径
  app.use(express.static(path.join(__dirname, 'data/public')));
  

  这样server/data/public就成了静态资源根目录，里面的images文件夹能被正常访问。

• 调整图片访问路径
  JSON里的image字段是images/earth.jpg，前端渲染时要给路径加上前缀/，不然浏览器会从当前页面路径下去找图片，导致404。比如React组件里这么写：

  <img src={`/${planet.image}`} alt={planet.name} />
  

  嫌麻烦的话，也可以直接在后端的JSON文件里把image路径改成/images/earth.jpg，前端直接用就行。

• 修复接口代码的语法错误
  你接口里fs.readFileSync(filePath, )多了个多余的逗号，而且没指定编码格式，会导致读取错误，修正成：

  const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));
  

  另外注意下planetes.json是不是拼写错了（比如应该是planets.json），路径写错的话也会导致数据返回异常。

• 验证静态资源是否可访问
  启动服务后，直接在浏览器地址栏输入http://localhost:你的端口号/images/earth.jpg，如果能看到图片，说明静态资源配置没问题，问题出在前端渲染路径；如果看不到，检查文件是否真的存在、有没有权限问题。

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