GitHub Pages部署后部分区块background-image不加载但本地运行正常求助

问题根因 #

你遇到的是GitHub Pages子目录部署场景下的资源路径匹配问题：

• 你的站点部署在域名的二级路径/Sunnyside-agency-landing-page/下，而CSS中背景图使用了/开头的根绝对路径url("/images/desktop/image-header.jpg")，这类路径会直接从域名根目录https://nadin3amanda.github.io/下查找资源，和你的图片实际存放路径https://nadin3amanda.github.io/Sunnyside-agency-landing-page/images/不匹配，因此加载失败。
• 本地运行时项目目录直接作为站点根目录，路径正好匹配，所以运行正常。后半部分区块的背景图能加载，说明对应代码用了正确的相对路径写法。

解决方案 #

把所有加载失败的背景图路径，从根绝对路径改成相对路径即可：

1. 如果你的CSS文件存放在项目根目录，直接去掉路径开头的斜杠：

/* 修改前 */
background-image: url("/images/desktop/image-header.jpg");
/* 修改后 */
background-image: url("images/desktop/image-header.jpg");

2. 如果你的CSS文件存放在css这类子文件夹中，需要先回退到上一级目录再查找图片资源：

background-image: url("../images/desktop/image-header.jpg");

修改完成后重新推送代码到GitHub，等待Pages部署完成后刷新即可看到效果。你也可以在站点页面按F12打开开发者工具的「网络」面板，刷新后核对资源请求地址，确认路径匹配。

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