GitHub Pages 静态资源路径需使用相对路径或根相对路径，而本地 Live Server 默认以项目根目录为服务器根路径，导致 ./images/... 在 GitHub Pages 中解析失败；同时 CSS :hover 失效通常由路径错误引发的资源加载失败间接导致。
github pages 静态资源路径需使用相对路径或根相对路径，而本地 live server 默认以项目根目录为服务器根路径，导致 `./images/...` 在 github pages 中解析失败；同时 css `:hover` 失效通常由路径错误引发的资源加载失败间接导致。
在 GitHub Pages 中，站点部署后的 URL 结构为 https://<username>.github.io/<repository-name>/，因此所有静态资源（如图片、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/ 下定位：
// ✅ 修改 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 中 <img src="...">、CSS 中 background-image: url(...) 及其他资源引用（如字体、图标），全部改为 /front-end-challenge1/... 格式；
- :hover 样式不生效往往不是 CSS 本身问题，而是因图片加载失败导致 DOM 渲染异常或 JS 报错中断执行——修复路径后，悬停效果将自动恢复；
- 建议在 index.html 的 <head> 中添加 <base href="/front-end-challenge1/">（需确保所有相对路径兼容），或更推荐直接统一使用根相对路径，避免歧义。
? 验证方式：
打开浏览器开发者工具（F12）→ Network 标签页 → 刷新 GitHub Pages 页面 → 查看是否有 404 的图片请求；成功加载后，图片与交互效果将完全一致于 Live Server 环境。
总结：GitHub Pages 的子路径部署机制要求显式声明资源位置，“路径即部署结构” 是关键原则。一次路径修正，即可同步解决图片不显示与 :hover 失效两大表象问题。
