GitHub Pages图片不显示求助：本地正常线上失效

我的GitHub Pages页面部署后，CSS背景图和<img>标签的图片都无法显示，但本地运行完全正常。已经排查过大小写问题，之前同类项目都能正常显示，不清楚这次哪里操作错了。

相关信息：

• GitHub Pages地址：https://chryspenalber.github.io/hercules/
• 仓库地址：https://github.com/chryspenalber/hercules

示例代码：
HTML部分：

<div class="img-overlay"></div>
<div id="topo">
    <a href="#">
        <img src="assets/images/chevron-double-up-white.svg" alt="">
    </a>
</div>

CSS部分：

.img-overlay {
    position: absolute;
    top: -300px;
    left: 0;
    width: 100%;
    height: 2400px;
    background: linear-gradient(to bottom, transparent 70%, var(--bg-color) 100%), url(/assets/images/bg-hercules.jpg) no-repeat top center / cover;
    opacity: 1;
    z-index: -1;
}

可能的解决方向 #

1. 修正路径适配子目录结构 #

你的GitHub Pages部署在/hercules/子路径下，CSS里的背景图用了绝对路径/assets/images/bg-hercules.jpg，这个路径会直接指向根域名下的assets文件夹，而非你的项目子目录。

两种修改方式：

• 改成相对路径（和本地逻辑一致，推荐）：去掉路径开头的斜杠，即url(assets/images/bg-hercules.jpg)
• 改成适配子目录的绝对路径：url(/hercules/assets/images/bg-hercules.jpg)

2. 确认文件实际存在性 #

登录GitHub仓库检查：

• assets/images/目录下是否确实存在目标图片文件
• 文件名、路径拼写完全匹配（包括大小写，再仔细核对一次，GitHub对大小写敏感）
• 图片文件有没有被.gitignore规则排除，导致没提交到仓库

3. 调整HTML图片路径 #

HTML里的<img>用了相对路径assets/images/chevron-double-up-white.svg，如果你的HTML文件不在仓库根目录（比如放在子文件夹里），这个路径会失效：

• 若HTML在根目录，当前路径没问题；若在子目录，改成基于当前位置的相对路径（比如../assets/images/chevron-double-up-white.svg）
• 或者直接用适配子目录的根相对路径：/hercules/assets/images/chevron-double-up-white.svg

4. 触发GitHub Pages重新部署 #

有时候平台会缓存旧资源，可尝试：

• 修改一个无关文件（比如README加个空格）再push，触发自动重新部署
• 进入仓库的Settings -> Pages页面，手动点击"Deploy branch"重新部署

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