如何在 GitHub Pages 中正确显示图库图片及修复悬停样式失效问题-js教程-PHP中文网

如何在 GitHub Pages 中正确显示图库图片及修复悬停样式失效问题

GitHub Pages 静态资源路径需使用相对路径或根相对路径，而本地 Live Server 默认以项目根目录为服务器根路径，导致 ./images/... 在 GitHub Pages 中解析失败；同时 CSS :hover 失效通常由路径错误引发的资源加载失败间接导致。

github pages 静态资源路径需使用相对路径或根相对路径，而本地 live server 默认以项目根目录为服务器根路径，导致 `./images/...` 在 github pages 中解析失败；同时 css `:hover` 失效通常由路径错误引发的资源加载失败间接导致。

在 GitHub Pages 中，站点部署后的 URL 结构为 https://.github.io//，因此所有静态资源（如图片、CSS、JS）的引用必须适配该子路径结构。您当前代码中使用的路径 './images/image-product-1.jpg' 是相对于当前 HTML 文件所在目录的相对路径，但在 GitHub Pages 环境下，当页面通过路由（如 /front-end-challenge1/）访问时，浏览器会以该子路径为基准解析 ./，导致图片请求实际发送至 https://dev-gus.github.io/images/...（404），而非正确的 https://dev-gus.github.io/front-end-challenge1/images/...。

✅ 正确做法：统一使用根相对路径（root-relative path），即以 / 开头、相对于站点根目录的路径。由于您的仓库名是 front-end-challenge1，GitHub Pages 将其作为子目录部署，因此所有资源应从 /front-end-challenge1/ 下定位：

Cnb Cool Git

CNB 云原生构建平台的 Git 操作技能，支持代码克隆、提交、推送、分支管理、Merge Request 管理、流水线触发与结果读取。初次使用需收集用户的 Git 用户名和邮箱。

下载

// ✅ 修改 main.js 中的图片路径为根相对路径
const imgURLs = [
  '/front-end-challenge1/images/image-product-1.jpg',
  '/front-end-challenge1/images/image-product-2.jpg',
  '/front-end-challenge1/images/image-product-3.jpg',
  '/front-end-challenge1/images/image-product-4.jpg'
];

⚠️ 注意事项：

不要使用 ./ 或 ../ 等相对路径，它们在 GitHub Pages 的子路径部署下极易失效；
检查 HTML 中、CSS 中 background-image: url(...) 及其他资源引用（如字体、图标），全部改为 /front-end-challenge1/... 格式；
:hover 样式不生效往往不是 CSS 本身问题，而是因图片加载失败导致 DOM 渲染异常或 JS 报错中断执行——修复路径后，悬停效果将自动恢复；
建议在 index.html 的中添加（需确保所有相对路径兼容），或更推荐直接统一使用根相对路径，避免歧义。