React部署GitHub Pages出现“Failed to load resource”图片加载失败问题

必做排查修复项 #

• 补全package.json的homepage配置：在项目根目录的package.json里，必须加上"homepage": "https://connoryoung2.github.io/photo-gallery/"（和你的GitHub Pages站点地址完全一致）。没加这个的话，React打包后的资源路径会错位，直接导致图片找不到。
• 改用React规范的图片引用方式：
  • 别再手动写./photos/xxx.png或者../photos/xxx.png这种相对路径了，推荐两种靠谱写法：
    1. import引入：比如import Photo from './photos/photo.png'，然后在img标签里写<img src={Photo} alt="描述文字" />，webpack打包时会自动处理路径，绝对不会错。
    2. 用PUBLIC_URL拼接路径：如果要直接写路径，就用<img src={${process.env.PUBLIC_URL}/photos/photo.png} alt="描述文字" />，process.env.PUBLIC_URL会自动匹配你在package.json里配置的homepage路径，完美适配GitHub Pages的部署环境。
• 检查本地打包结果：先在本地执行npm run build，打开生成的build文件夹，确认photos文件夹和里面的图片都完整存在，要是打包时就漏了，那部署上去肯定加载失败。
• 别瞎改路径层级：不要手动加../这类层级符号，React打包后的静态资源都在build目录下，层级是固定的，用上面两种方法就能避开层级问题。

额外验证技巧 #

• 打开浏览器控制台（按F12），切换到“网络”标签，看图片的请求地址。如果显示404，就对比这个错误URL和GitHub Pages上正确的资源路径，调整配置就行。
• 确认GitHub仓库的gh-pages分支（如果用gh-pages工具部署的话）里，build文件夹的内容是不是完整的，有没有漏掉photos文件夹。

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