Git Pages部署网站部分图片无法显示问题排查

问题现象 #

首次为家族企业开发站点，选择部署到GitHub Pages做效果预览，部署完成后出现异常：页面内第一张图片可正常显示，其余图片全部加载失败。先后尝试./images、../images、/images三种路径写法配置图片地址，问题均未解决。

故障根因 #

问题本质是不同环境的文件名大小写规则差异：

• 本地开发用的Windows、macOS系统默认不区分文件名大小写，所以本地预览时不管后缀是.jpg还是.JPG都能正常加载
• GitHub Pages底层运行在Linux环境，严格区分文件名大小写

Git仓库里的图片文件没有统一使用小写.jpg后缀，部分文件后缀为大写.JPG，代码里写的图片路径后缀和仓库实际存储的文件后缀大小写不匹配时，服务端就会找不到对应资源，导致图片加载失败。这也是为什么第一张图片因为后缀刚好匹配能正常显示，其余不匹配的图片全部加载失败，和你写的相对路径前缀（.//..///）没有关系。

修复步骤 #

• 批量检查图片存储目录下所有图片的后缀名，统一改成和代码中引用路径完全一致的大小写，建议全部规范为小写.jpg，避免后续再出现同类问题
• 本地Git默认开启大小写忽略规则，直接修改文件名后缀大概率不会被Git识别为有效变更，需要先在项目目录执行以下命令关闭本地Git的大小写忽略配置：

  git config core.ignorecase false
  

• 确认所有重命名变更被Git正确识别后，提交推送至远程仓库，等待1-2分钟让GitHub Pages完成重新构建部署，之后按Ctrl+F5硬刷新页面清除浏览器缓存，所有图片即可正常加载。

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