如何在 GitHub Dev 环境中正确显示 HTML 中的本地图片

在 github dev（如 github.dev 或 github codespaces）中，html 文件无法显示同目录下的本地图片，通常是因为路径引用错误或文件系统限制所致，而非代码语法问题。

当你在 github.dev（即浏览器中直接打开 https://github.dev/…）编辑并预览 html 文件时，需特别注意：该环境不提供本地文件系统的 HTTP 服务支持。即使图片与 HTML 文件位于同一仓库目录下（例如 index.html 和 logo.jpg 都在根目录），直接使用相对路径 仍会失败——因为浏览器出于安全策略，拒绝从 file:// 或受限沙箱环境加载本地资源，且 GitHub.dev 的预览模式并不启动真正的 Web 服务器。

✅ 正确做法如下：

1. 确认路径大小写与扩展名严格匹配
   linux/unix 系统（包括 GitHub 的后端环境）区分大小写。若文件实际为 Logo.JPG，则 src=”logo.jpg” 将 404。建议统一使用小写命名：icon.png、banner.jpg。

2. 使用相对路径（推荐）且避免多余符号
   ✅ 正确：

   @@##@@

   ❌ 错误（常见冗余）：

   @@##@@    @@##@@    

3. GitHub.dev 无法直接预览本地图片？用 GitHub Pages 替代预览
   GitHub.dev 本质是编辑器，不运行 HTTP 服务器，因此无法解析相对路径的静态资源。要真实验证图片是否能加载，请：

   • 将仓库启用 GitHub Pages（Settings → Pages → Branch: main / Folder: / (root)）；
   • 访问生成的 https://.github.io//，此时资源按标准 Web 规则加载，路径生效。

4. 调试技巧

   立即学习“前端免费学习笔记（深入）”；

   • 在 chrome 中右键 → “检查” → 切换到 Network 标签页，刷新页面，查看 photo.jpg 是否返回 404；
   • 点击该请求，看 Preview/Response 是否为空，Confirm 请求 URL 是否与实际文件路径一致（如 https://.github.io/repo/photo.jpg）；
   • 若在本地 vs code 中使用 Live Server 插件预览，则路径正常工作——这说明问题出在 GitHub.dev 的运行环境限制，而非代码本身。

? 总结：
不是你的 HTML 写错了，而是 GitHub.dev 缺乏 Web 服务支持。解决路径问题（大小写、拼写、位置）是前提，但最终验证务必通过 GitHub Pages 或本地开发服务器（如 Live Server）完成。切勿依赖 github.dev 的“预览 HTML”功能来测试静态资源加载。