Bootstrap英雄区背景图片在GitHub Pages部署后不显示（本地运行正常）

嘿，我之前也碰到过一模一样的问题！这种本地正常、部署后掉链子的情况，大概率是路径或者大小写的坑，咱们一步步来排查解决：

• 先核对文件名和路径的大小写：GitHub是严格区分大小写的，但咱们常用的Windows、macOS本地系统大多不区分。比如你本地CSS里写的是url(images/heroBg.jpg)，但仓库里实际文件是Images/HeroBG.jpg，本地能正常加载，但GitHub Pages就会找不到。赶紧去你的仓库里核对图片文件名、文件夹名和CSS里写的路径，确保大小写完全一致。

• 检查相对路径是否适配GitHub Pages的根目录：本地开发时，你的服务器根目录是项目文件夹，但GitHub Pages部署项目仓库时，根目录是你的用户名.github.io/仓库名。如果你的CSS里用了绝对路径比如url(/images/hero-bg.jpg)，本地会从项目根目录找，但部署后会去你的用户名.github.io/images/...找，而实际图片在你的用户名.github.io/仓库名/images/...，自然找不到。
  解决办法有两个：

  1. 改用相对路径：比如你的CSS文件在css文件夹里，图片在上级的images文件夹，就写成url('../images/hero-bg.jpg')，根据你的文件结构调整层级。
  2. 设置base标签：在HTML的<head>里添加<base href="/你的仓库名/">，这样所有绝对路径都会自动带上仓库名前缀，不用一个个改CSS。

• 确认图片已经被提交到仓库：有时候本地的图片可能没被Git追踪，导致部署时没传到GitHub。去你的仓库页面里找对应的图片文件夹，看看背景图是不是真的在里面。如果没找到，就用命令行执行git add 图片的相对路径，然后提交推送，重新部署就行。

• 清理GitHub Pages缓存：偶尔会遇到部署后缓存没更新的情况，导致旧的错误路径还在生效。你可以去仓库的Settings -> Pages页面，在Build and deployment区域随便调整一下设置（比如切换一下Source选项再切回去），手动触发重新部署；或者等10-15分钟，缓存一般会自动刷新。

举个实际的例子，假设你原来的CSS代码是这样的：

.hero {
  background-image: url('/images/hero-background.jpg');
}

改成相对路径（假设CSS在css/style.css，图片在images/hero-background.jpg）：

.hero {
  background-image: url('../images/hero-background.jpg');
}

备注：内容来源于stack exchange，提问作者mr.sopon