React无法加载本地图片，请求被转发至代理？

问题根源 #

你遇到的问题是因为React开发服务器的代理规则会拦截相对路径的请求——当你使用camera.jpg这类相对路径时，服务器会把它当成API请求转发到后端，而非加载本地public目录下的图片资源。

解决方案 #

1. 正确存放本地图片 #

确保camera.jpg放在项目的public目录下（没有则新建），React会直接从这个目录加载静态资源，无需经过webpack编译。

2. 使用绝对路径引用图片 #

修改图片路径为以/开头的绝对路径，这样开发服务器会直接从public目录读取，不会触发代理转发：

// 原代码示例
<img src={imageUrl || 'camera.jpg'} alt="Camera" />

// 修改为绝对路径
<img src={imageUrl || '/camera.jpg'} alt="Camera" />

3. 适配生产环境的可靠写法 #

如果需要适配生产环境的子目录部署场景，可以用process.env.PUBLIC_URL拼接路径：

<img 
  src={imageUrl || `${process.env.PUBLIC_URL}/camera.jpg`} 
  alt="Camera" 
/>

4. 理清package.json的proxy作用 #

package.json里的proxy字段仅用于转发API请求（比如/api/*这类路径），本地静态资源必须用绝对路径或通过public目录加载，避免和API请求路径冲突。如果你的代理规则是全局配置（直接写后端地址），更要注意区分静态资源和API请求的路径差异。

验证方式 #

修改路径后重启开发服务器，查看网络请求：如果camera.jpg的请求地址是前端服务器地址（比如http://localhost:3000/camera.jpg），而非转发到后端地址，就说明问题已解决。

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