本地预览正常但 GitHub Pages 上图片无法加载，通常是因路径使用了绝对路径（以 / 开头）而非相对路径，导致资源在子目录部署时解析失败。
本地预览正常但 github pages 上图片无法加载，通常是因路径使用了绝对路径（以 `/` 开头）而非相对路径，导致资源在子目录部署时解析失败。
当你在本地用 VS Code Live Server 打开 index.html 时，服务器通常以项目根目录为 Web 根路径（即 http://localhost:5500/），此时写成 
/ 被解析为 http://localhost:5500/assets/...，恰好匹配。
但在 GitHub Pages 中，你的网站很可能部署在子路径下，例如：https://username.github.io/your-portfolio/
此时，以 / 开头的路径（如 /assets/images/...）会被浏览器解析为 站点根目录，即 https://username.github.io/assets/images/... —— 而实际图片位于 https://username.github.io/your-portfolio/assets/images/...，因此 404 报错，图片失效，仅显示 alt 文字。
✅ 正确做法：统一使用相对路径
将路径前的 / 改为 ./，明确表示“从当前 HTML 文件所在目录出发”：
<!-- ✅ 推荐：相对路径，兼容本地开发与 GitHub Pages --> <img src="./assets/images/movie-ranking.png" alt="Picture of my movie ranking project"><img src="./assets/images/birthday-invite.png" alt="Picture of my birthday invite project">
? 小贴士：
-
./表示当前目录；../表示上一级目录；/表示整个域名的根路径（易出错，慎用）； - 确保文件夹结构严格一致：
index.html与assets/同级，且assets/images/下确实存在对应.png文件（注意大小写和扩展名，GitHub 文件系统区分大小写）； - 部署前可在浏览器开发者工具（F12 → Network 标签页）中查看图片请求是否返回 404，快速定位路径问题。
总结：静态站点部署时，优先使用 ./ 开头的相对路径，避免依赖服务器根路径假设——这是保障跨环境（本地、Netlify、GitHub Pages 等）资源加载稳定的关键实践。
