GitHubPages显示本地图片技巧

你在学习文章相关的知识吗？本文《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. 使用相对路径（推荐）且避免多余符号
   ✅ 正确：

   <img src="photo.jpg" alt="My photo">

   ❌ 错误（常见冗余）：

   <img src="./photo.jpg">   <!-- ./ 非必需，但可接受 -->
   <img src="/photo.jpg">    <!-- 绝对路径，仅在部署到根域时有效，在 github.dev 中无效 -->

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”功能来测试静态资源加载。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《GitHubPages显示本地图片技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。