Express存储的静态图片无法在React img组件中正常显示

后端配置 #

后端静态资源映射代码：

app.use("/uploads", express.static("./server/uploads"));

目录结构：

index.js
server
└── uploads
    └── 16562777154317mbc3jbenz.png

直接在浏览器地址栏输入 http://localhost:4500/uploads/16562777154317mbc3jbenz.png，图片可以正常加载。

前端实现 #

页面中写死图片地址引入：

<img src="http://localhost:4500/uploads/16562777154317mbc3jbenz.png" alt="Test" style="height: 200px; object-fit: cover;">

但页面运行时图片加载失败，无法正常渲染。

按出现概率排序依次排查：

• 静态资源相对路径匹配错误
  express.static 接收相对路径作为参数时，路径基准是Node进程的启动目录，不是index.js文件所在目录。如果启动服务时的工作目录不对，会出现资源路径匹配不稳定的问题——地址栏直接访问偶尔命中缓存能打开，页面实际请求时路径匹配失败。
  修复方式：改用绝对路径映射静态目录，彻底规避工作目录带来的路径问题：

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

• 跨域安全策略拦截
  地址栏直接输入URL访问属于第一方请求，不受跨域策略限制；如果前端服务和后端服务端口不一致（比如前端跑在localhost:5173/localhost:3000，后端在4500端口），后端没配置CORS响应头时，浏览器会拦截页面发起的跨域资源请求。
  修复方式：后端添加CORS配置，安装cors依赖后加入中间件：

  const cors = require('cors')
  // origin填前端服务实际运行的地址
  app.use(cors({
    origin: "http://localhost:5173"
  }))
  

• 响应头不符合浏览器安全要求
  打开浏览器开发者工具的Network面板，找到该图片的请求记录：
  • 如果响应状态码不是200，根据返回的状态码排查对应报错（比如404就是路径不对，403就是权限问题）
  • 如果响应头里的Content-Type不是图片对应的MIME类型（比如返回了text/html），或者X-Content-Type-Options配置异常，浏览器会拒绝把响应当成图片渲染。express.static默认会自动正确设置MIME类型，只要路径配置正确不会出现这类问题，如果自己写过全局响应头逻辑，重点排查是否误改了静态资源的响应头。
• 本地缓存或浏览器插件拦截
  按Ctrl+Shift+R（Mac是Cmd+Shift+R）硬刷新清除缓存重试，再禁用广告拦截、隐私防护类浏览器插件，这类插件经常会误拦截页面内的静态资源请求。

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