部署至GitHub Pages后页面图片无法显示问题求助

排查路径错误 #

• 检查JSON文件中的图片路径：如果用了绝对路径（以/开头），GitHub Pages部署后会指向https://bukreiev.github.io/而非项目子目录https://bukreiev.github.io/webstudio-project/，直接导致路径失效。
  • 修正方案：把路径改成相对路径（比如./images/your-image.jpg），或者带项目名的绝对路径（/webstudio-project/images/your-image.jpg）。
• 同步修正srcset里的所有图片路径，确保和src的路径规则完全一致。

确认图片文件已完整上传 #

• 检查仓库的images文件夹是否已提交：查看GitHub仓库的文件列表，确认需要的图片都存在，没有被.gitignore规则排除。如果.gitignore里有排除images/的条目，删除后重新提交推送。

验证GitHub Pages部署配置 #

• 进入仓库的Settings → Pages页面，确认部署分支是正确的分支（比如main），部署来源为/root（如果项目文件都在根目录）。如果选了/docs，所有图片路径要调整到docs/目录下的对应位置。

测试路径正确性 #

• 部署后，右键无法显示的图片选择“检查”，查看控制台的404错误信息，确认请求的图片URL是否正确。比如如果请求的是https://bukreiev.github.io/images/xxx.jpg，这就是路径错误，要改成https://bukreiev.github.io/webstudio-project/images/xxx.jpg。

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