Express+React静态图片无法渲染，请求返回HTML页面求助

问题现象 #

• 用Express配置了静态图片服务，但React客户端无法渲染图片
• 直接访问localhost:5173/images/profilePicture-59745.jpeg时，返回的是React项目的HTML页面，Content-Type为text/html，而非图片格式

核心问题 #

你访问的是Vite开发服务器的端口（5173），但静态图片服务是部署在Express服务器上的。Vite找不到对应路径的资源，就返回了默认的HTML入口文件。

解决方案 #

1. 直接访问Express服务器端口

确认你的Express服务器运行端口（比如默认的3000），把图片URL改成http://localhost:3000/images/profilePicture-59745.jpeg，直接访问这个地址就能看到图片。

2. 配置Vite代理（推荐）

如果不想在客户端代码里写死服务器地址，可以在Vite配置文件（vite.config.js）中添加代理规则，让Vite把/images路径的请求转发到Express服务器：

export default {
  server: {
    proxy: {
      '/images': {
        target: 'http://localhost:3000', // 替换成你的Express服务器地址
        changeOrigin: true
      }
    }
  }
}

配置完成后，客户端可以直接用/images/xxx.jpeg的路径请求图片，Vite会自动转发到Express服务器。

额外验证 #

• 检查Express项目根目录下的images文件夹是否存在，且Multer上传的图片确实保存到了该文件夹
• 访问Express服务器的图片URL，确认返回的Content-Type是对应图片类型（比如image/jpeg）

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