React应用public目录图片线上正常加载但本地localhost无法加载如何解决

问题排查与解决方案 #

• 优先检查PUBLIC_URL前缀适配问题 #

  你在package.json中配置的homepage字段值为部署的子路径，Create React App会自动将该值作为PUBLIC_URL环境变量的默认值，本地开发时也会沿用该前缀。
  如果你代码中直接写/images/xxx.png这类绝对路径引用public目录资源，本地实际请求路径会带上子路径前缀，但本地开发服务的根路径没有对应层级，自然无法加载资源。
  修复方案：
  1. 在项目根目录新建.env.development文件，添加一行配置PUBLIC_URL=/，指定本地开发时使用根路径作为公共资源前缀
  2. 所有public目录资源的引用都拼接环境变量，写法改为：src={${process.env.PUBLIC_URL}/images/你的图片名.png}，适配所有环境的路径规则

• 排查本地依赖与缓存问题 #

  无明确改动突然出现异常，大概率是本地缓存或依赖损坏导致：
  1. 删除项目根目录的node_modules文件夹、package-lock.json或yarn.lock文件
  2. 重新执行依赖安装命令：npm install 或 yarn install
  3. 清理浏览器缓存后用无痕模式启动项目测试，排除浏览器侧缓存的旧路径规则影响

• 校验构建工具配置 #

  如果你的项目已经切换为Vite构建，检查vite.config.js中是否配置了非空的base参数，本地开发时需要将base设置为/才能正常加载public目录资源。
  你可以打开浏览器控制台的「网络」标签，查看图片资源的实际请求路径，和本地public目录的文件层级做对比，就能快速定位路径不匹配的问题。

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