create-react-app项目public文件夹图片本地无法加载但线上正常问题

该问题由package.json中配置的homepage字段导致，该字段会修改本地开发环境下的公共资源路径前缀。即使页面本身可以正常渲染，所有public目录下的资源请求路径都会因此匹配错误，本地服务返回了fallback的index.html内容，所以你会看到资源响应的Content-Type为text/html，无法正常识别为图片/音频资源。该配置不影响GitHub Pages线上环境，因此线上访问完全正常。

• 推荐通用方案：所有引用public目录下资源的位置，统一拼接process.env.PUBLIC_URL前缀，示例如下：

  // 原错误写法（路径未适配前缀）
  <img src="/images/bg.png" alt="背景" />
  
  // 修正后写法
  <img src={`${process.env.PUBLIC_URL}/images/bg.png`} alt="背景" />
  

  该变量是create-react-app内置的环境变量，会自动根据运行环境匹配正确的资源前缀，无论是本地开发还是GitHub Pages部署都可以正常生效，不需要针对环境单独修改配置。
• 临时本地修复方案：如果暂时不想修改资源引用代码，可以直接删除或注释package.json中的homepage字段，重启本地开发服务后资源就会恢复正常加载，线上部署前再加回该配置即可。

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