github pages 网站中本地图片不显示，通常是因为 html 中的图片路径与仓库实际文件结构不匹配，导致浏览器请求 404；只需统一路径层级并正确提交文件，即可让本地图片正常加载。
当你将本地开发的网站部署到 GitHub Pages（如 https://tyler-104.github.io）时，所有资源（包括图片）都必须通过 相对 URL 从你的 GitHub 仓库中加载——它们不会读取你电脑桌面或本地文件系统中的图片。问题根源往往出在「路径不一致」：你的 HTML 写的是 <img src="img/3D/Grapes.webp">，但实际图片文件却直接放在仓库根目录下的 3D/Grapes.webp，没有 img/ 这一层文件夹。
? 快速诊断方法：
打开网站 → 右键 →「检查」→ 切换到「Console」或「Network」标签页 → 刷新页面 → 查看是否有红色 404 Not Found 请求（例如 GET https://tyler-104.github.io/img/3D/Grapes.webp 404）。这明确告诉你：浏览器按该路径去找图，但服务器上根本不存在这个路径。
✅ 正确解决方案（推荐）：
保持路径简洁、真实、可预测。建议采用以下两种方式之一：
方式一：调整 HTML 路径以匹配实际结构（推荐新手）
如果图片文件 Grapes.webp 直接位于仓库根目录下的 3D/ 文件夹中（即 GitHub 上路径为 https://github.com/Tyler-104/tyler-104.github.io/blob/main/3D/Grapes.webp），那么 HTML 中应写成：
<img src="3D/Grapes.webp" alt="葡萄3D渲染">
而非 img/3D/Grapes.webp。
方式二：重构目录结构并更新路径（更规范）
创建统一的 img/ 目录，把所有图片移入其中（含子文件夹），再更新 HTML：
# 在项目根目录执行（确保已安装 Git 并处于仓库中） git mv 3D img/3D git commit -m "move images into img/ folder" git push
之后 HTML 改为：
<img src="img/3D/Grapes.webp" alt="葡萄3D渲染">
⚠️ 关键注意事项：
- GitHub Pages 默认从仓库的 main 或 master 分支的根目录（或 /docs 文件夹）提供静态文件，路径区分大小写（IMG/ ≠ img/）；
- 提交后务必 git push，且等待 GitHub Actions 完成构建（通常 < 1 分钟），刷新前可查看 https://www.php.cn/link/33a84c00e939cc5bc0ced0b8b246ab3e 确认部署成功；
- 不要使用本地绝对路径（如 C:/Users/.../Grapes.webp）或 file:// 协议——它们在网页中完全无效；
- 图片格式（.webp, .png, .jpg）无需特殊配置，GitHub Pages 原生支持。
? 小结：本地图片完全可以用于 GitHub Pages，无需上传到 Unsplash 或其他图床——只要确保「代码中写的路径」和「GitHub 仓库里真实的文件路径」严格一致，并完成提交与推送，图片就会立即显示。这是静态网站部署中最常见也最容易修复的问题之一。
