本地正常显示的Preloader部署到GitHub Pages后失效且控制台报status.gif资源错误的原因排查

我帮你排查下这个问题，核心原因是本地开发环境和GitHub Pages的根路径解析规则不一致，具体细节和解决方法如下：

问题根源 #

• 本地开发时，CSS里的background-image:url(/img/status6.gif?);中的/代表的是你的项目根目录（也就是Portfolio文件夹的根），所以浏览器能正确找到Portfolio/img/status6.gif这个文件。
• 但部署到GitHub Pages后，你的站点访问路径是https://mohit421.github.io/Portfolio/，此时/指向的是https://mohit421.github.io/（GitHub Pages的全局根），而不是你的Portfolio仓库根目录。浏览器会尝试去https://mohit421.github.io/img/status6.gif找图片，这个路径根本不存在，所以控制台会报错，预加载器自然无法显示。

另外还要注意一个细节：GitHub是区分文件名大小写的，如果你的本地图片文件名是Status6.gif但代码里写的是status6.gif，Windows系统本地开发不会有问题，但GitHub Pages会因为大小写不匹配找不到文件，也会出现类似错误。

可行的解决方案 #

1. 使用相对路径（最推荐，适配本地和部署环境） #

修改CSS中的图片路径，去掉开头的斜杠：

background-image:url(img/status6.gif?);

相对路径会基于当前CSS文件的位置去查找图片，如果你的CSS文件在项目根目录，这个路径就会正确指向Portfolio/img/status6.gif，不管是本地开发还是GitHub Pages都能正常解析。

2. 添加base标签统一路径 #

在HTML的<head>标签里添加一个<base>标签，指定页面的基础URL：

<base href="/Portfolio/">

这样页面中所有的绝对路径都会基于这个基础URL解析，GitHub Pages下就会正确指向你的仓库根目录。不过要注意，本地开发时可能需要把这个值改成/（项目根），或者用条件判断来区分环境。

3. 使用带仓库名的绝对路径 #

直接把路径写成包含仓库名的绝对路径：

background-image:url(/Portfolio/img/status6.gif?);

这个方法在GitHub Pages上能正常工作，但本地开发时，如果你的服务器根不是/Portfolio/，可能会找不到图片，适合只关注部署效果的场景。

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