ReactJS通过Express加载MySQL存储路径的图片报404如何修复

按排查优先级从高到低尝试以下方案：

• 优先排查Node服务静态资源配置
  90%以上的该类404问题，都是因为Node服务没有配置静态资源托管，默认不会把本地文件夹里的文件对外提供访问能力。
  如果你使用Express框架，在服务入口文件（通常是app.js/index.js）中添加以下配置，注意配置必须写在业务路由注册之前：

  const path = require('path')
  const express = require('express')
  const app = express()
  
  // 将本地images文件夹映射为 /images 开头的静态访问路径
  app.use('/images', express.static(path.join(__dirname, 'images')))
  

  如果你使用Koa框架，先安装koa-static依赖，再添加配置：

  const path = require('path')
  const Koa = require('koa')
  const serve = require('koa-static')
  const app = new Koa()
  
  app.use(serve(path.join(__dirname, 'images'), { prefix: '/images' }))
  

  配置完成后重启Node服务，直接在浏览器地址栏输入http://127.0.0.1:8080/images/abc.jpg，能正常打开图片再继续排查前端问题，如果这一步还是404，和React代码完全无关，只需要排查服务端问题。
• 校验数据库存储的图片路径格式
  数据库里不要存服务器本地绝对路径（比如D:\my-project\images\abc.jpg、/root/project/images/abc.jpg这类服务端本地磁盘路径），这类路径前端无法识别访问。
  推荐存储统一的相对路径格式：/images/abc.jpg，前端渲染时会自动和当前服务域名拼接，后续做代理、跨域部署时不需要批量改路径。如果存完整绝对路径，要确认端口、域名和服务实际监听的配置一致，不要出现localhost和127.0.0.1混用、端口号写错的问题。
• 检查服务端拦截规则
  如果配置完静态资源还是访问不了，检查服务端的全局中间件：比如跨域配置是否覆盖了/images路径、登录鉴权/接口签名校验中间件有没有把静态资源路径排除，不要让静态资源请求被接口逻辑拦截返回404。同时确认Node运行进程对images文件夹、内部的图片文件有读取权限。
• 前端渲染路径校验
  你当前的React代码直接取接口返回的image字段作为img标签的src，可以打开浏览器控制台的Network面板，查看图片请求的实际路径：
  • 确认字段值不是undefined、空字符串
  • 确认路径没有重复拼接前缀（比如错误拼成/images/images/abc.jpg）、没有多余转义字符
  • 如果前后端端口不同，注意给图片请求配置对应代理，或者直接使用完整的服务端地址拼接相对路径

排查小技巧：永远先直接在浏览器访问图片的完整URL，能正常打开再调试前端代码，跳过这一步会浪费大量排查时间。

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