在 github dev（如 github.dev 或 github codespaces）中，html 文件无法显示同目录下的本地图片，通常是因为路径引用错误或文件系统限制所致，而非代码语法问题。
当你在 GitHub.dev（即浏览器中直接打开 https://github.dev/...）编辑并预览 HTML 文件时，需特别注意：该环境不提供本地文件系统的 HTTP 服务支持。即使图片与 HTML 文件位于同一仓库目录下（例如 index.html 和 logo.jpg 都在根目录），直接使用相对路径 <img src="logo.jpg"> 仍会失败——因为浏览器出于安全策略，拒绝从 file:// 或受限沙箱环境加载本地资源，且 GitHub.dev 的预览模式并不启动真正的 Web 服务器。
✅ 正确做法如下：
确认路径大小写与扩展名严格匹配
Linux/Unix 系统（包括 GitHub 的后端环境）区分大小写。若文件实际为 Logo.JPG，则 src="logo.jpg" 将 404。建议统一使用小写命名：icon.png、banner.jpg。-
使用相对路径（推荐）且避免多余符号
✅ 正确：<img src="photo.jpg" alt="My photo">
❌ 错误（常见冗余）：
<img src="./photo.jpg"> <!-- ./ 非必需，但可接受 --> <img src="/photo.jpg"> <!-- 绝对路径，仅在部署到根域时有效，在 github.dev 中无效 -->
-
GitHub.dev 无法直接预览本地图片？用 GitHub Pages 替代预览
GitHub.dev 本质是编辑器，不运行 HTTP 服务器，因此无法解析相对路径的静态资源。要真实验证图片是否能加载，请：- 将仓库启用 GitHub Pages（Settings → Pages → Branch: main / Folder: / (root)）；
- 访问生成的 https://<username>.github.io/<repo>/，此时资源按标准 Web 规则加载，路径生效。
-
调试技巧
立即学习“前端免费学习笔记（深入）”；
- 在 Chrome 中右键 → “检查” → 切换到 Network 标签页，刷新页面，查看 photo.jpg 是否返回 404；
- 点击该请求，看 Preview/Response 是否为空，Confirm 请求 URL 是否与实际文件路径一致（如 https://<user>.github.io/repo/photo.jpg）；
- 若在本地 VS Code 中使用 Live Server 插件预览，则路径正常工作——这说明问题出在 GitHub.dev 的运行环境限制，而非代码本身。
? 总结：
不是你的 HTML 写错了，而是 GitHub.dev 缺乏 Web 服务支持。解决路径问题（大小写、拼写、位置）是前提，但最终验证务必通过 GitHub Pages 或本地开发服务器（如 Live Server）完成。切勿依赖 github.dev 的“预览 HTML”功能来测试静态资源加载。
