当在 GitHub Pages 等静态托管平台上线网站时，图片路径错误（尤其是误用绝对路径 /assets/...）会导致图片无法加载，仅显示 alt 文本；正确使用相对路径 ./assets/... 可彻底解决该问题。
当在 github pages 等静态托管平台上线网站时，图片路径错误（尤其是误用绝对路径 `/assets/...`）会导致图片无法加载，仅显示 `alt` 文本；正确使用相对路径 `./assets/...` 可彻底解决该问题。
在本地开发（如 VS Code Live Server）中，浏览器常以 http://localhost:5500/ 为根路径运行，此时写 src="/assets/images/movie-ranking.png" 可能意外生效——因为 Live Server 将 / 解析为项目根目录。但GitHub Pages 的部署结构完全不同：你的站点通常托管在子路径下（例如 https://username.github.io/repo-name/），此时以 / 开头的绝对路径会强制指向域名根目录（即 https://username.github.io/），而非你的仓库子目录，导致图片 404。
✅ 正确做法是使用相对路径（relative path），明确告诉浏览器：“从当前 HTML 文件所在位置出发，进入 assets/images/ 目录找图”：
<!-- ✅ 推荐：相对路径，兼容本地开发与 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">
⚠️ 注意事项：
-
./表示“当前目录”，不可省略（src="assets/images/..."虽有时有效，但语义模糊，易出错）； - 确保文件夹名、文件名大小写完全一致（Linux 服务器区分大小写，GitHub Pages 基于 Linux）；
- 检查浏览器开发者工具（F12 → Network 标签页）中图片请求是否返回 404，确认实际缺失路径；
- 若 HTML 文件位于子目录（如
/pages/index.html），路径需相应调整为../assets/images/...。
? 总结：始终优先使用 ./ 开头的相对路径管理静态资源，这是跨环境部署最稳健的实践。本地测试时可搭配简易 HTTP 服务（如 npx serve）模拟真实路径行为，避免仅依赖 VS Code 插件的“宽容”解析。
