React中public/uploads下JPEG可正常显示PNG报404如何解决

1. 优先排查multer存储配置的后缀逻辑 #

这是最常见的触发原因：如果你的multer filename 回调函数里硬编码了.jpeg后缀，或者只处理了jpeg格式的后缀判断，会导致PNG文件存储时后缀被错误修改，比如上传的a.png实际存为a.png.jpeg，自然请求原始PNG路径就返回404。
请修改你的multer存储配置，正确适配所有图片后缀：

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/uploads/')
  },
  filename: function (req, file, cb) {
    // 动态提取原始文件后缀，不要硬编码为jpeg
    const ext = file.originalname.split('.').pop().toLowerCase()
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
    cb(null, 'postImage-' + uniqueSuffix + '.' + ext)
  }
})

2. 修正静态资源路径写法 #

你存在数据库的post.image字段仅需存储uploads/xxx.png格式的相对路径即可，不要带域名也不要开头加斜杠，img标签使用如下写法就可以直接读取public目录下的资源：

<img src={`/${post.image}`} alt="testing" />

注意不要用require或者import引入动态上传的图片：require是webpack打包阶段用来处理静态资源的语法，运行时动态上传到public目录的文件不在打包范围内，用require必然会报错。

3. 检查Express静态托管配置 #

确认你的Express服务端没有拦截PNG格式的资源请求，且正确托管了public目录：

// 该配置要放在所有路由规则之前，确保静态资源优先级最高
app.use(express.static('public'))
// 检查是否有针对.png后缀的错误拦截逻辑，有的话直接删除

4. 验证磁盘文件与请求路径匹配度 #

直接到项目的public/uploads目录下，核对报错的PNG文件是否真实存在，文件名大小写是否和请求路径完全一致：Windows环境不区分文件名大小写，但Mac/Linux环境下xxx.PNG和xxx.png会被识别为两个不同的文件，很容易出现JPEG正常、PNG404的情况。

以上步骤排查完成后即可正常展示PNG图片，不需要额外修改React的默认配置。

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