GitPages图片不显示但本地正常的技术求助

核心问题：绝对路径不匹配GitPages的子目录结构 #

本地正常但GitPages失效的根源是以/开头的绝对路径，在GitPages子目录部署环境下无法正确指向资源：

• 本地开发服务器将你的项目文件夹作为网站根目录，/assets/img/Topbar1.png能精准指向项目内的对应文件；
• 但GitPages部署后，你的网站位于子路径下，/assets/...会被解析为根域名下的路径，而非项目子目录下的资源路径，导致文件找不到。

具体修复步骤 #

1. 修复顶部横幅背景图路径 #

修改style.css第83行和第89行的背景图路径，去掉开头的斜杠/：

#topbar {
  height: 90px;
  font-size: 14px;
  transition: all 0.5s;
  color: #ffffff;
  padding: 0;
  background: linear-gradient( #000000, #8b0000);
  background-image: url("assets/img/Topbar1.png"); /* 移除开头的/ */
  background-size: cover;
}

@media (max-width: 1100px)  {
  #topbar{
  background-image: url("assets/img/Topbar2.png"); /* 移除开头的/ */
  background-size: cover;
  }
}

2. 修复favicon路径 #

打开index.html第13行，将favicon的绝对路径改为相对路径。假设mIcon.jpg在项目根目录，修改为：

<link rel="icon" href="mIcon.jpg">

如果favicon存放在子文件夹中，对应调整为匹配的相对路径（比如assets/img/mIcon.jpg）。

验证方法 #

修改后提交代码到GitHub，等待GitPages重新部署，然后：

• 打开浏览器开发者工具（F12），切换到「网络」标签，刷新页面查看资源加载状态；
• 检查背景图和favicon的请求URL，确认是否正确指向项目子目录下的资源。

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