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

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

在 gitHub Dev 环境中编写 html 时，常见的误区是直接使用相对路径（如 ）并期望浏览器自动加载本地文件——但github.dev 默认以 https://github.dev/… 为根路径运行，不启用本地文件系统服务（即不启动 HTTP 服务器），因此无法通过相对路径读取同目录下的图片资源。

✅ 正确做法如下：

1. 确认图片真实存在且命名一致
   检查文件名是否严格匹配（区分大小写！）：logo.jpg ≠ Logo.JPG ≠ logo.JPEG。推荐统一使用小写、无空格、无中文的命名，例如 banner.png。

2. 使用相对路径时，确保 HTML 和图片在同一层级

   @@##@@

3. ⚠️ 关键限制：GitHub.dev 不支持 file:// 协议或纯静态文件访问
   浏览器出于安全策略，会阻止从 file:// 协议加载本地资源（即使路径正确）。因此，在 GitHub.dev 中直接打开 .html 文件（双击或用“Open with Live Server”以外方式）必然失败。

4. 推荐解决方案：启用本地开发服务器

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

   • 在 vs code + GitHub.dev 环境中，安装并启用 Live Server 扩展；
   • 右键 HTML 文件 → “Open with Live Server”，此时页面将以 http://127.0.0.1:5500/… 启动，支持标准相对路径解析；
   • 示例项目结构：

     my-project/ ├── index.html └── banner.jpg   ← 与 HTML 同级

     对应 HTML 中写：

     @@##@@

5. 替代方案：使用 Base64 内联图片（适合小图）
   若仅需临时调试且图片较小，可转为 Base64 编码嵌入 HTML，完全规避路径问题：

   @@##@@

   （可通过在线工具如 base64.guru 快速转换）

? 总结：
不是 HTML 语法错，而是运行环境缺失 HTTP 服务；路径正确 ≠ 能加载——务必通过 Live Server 等本地服务器打开 HTML，而非直接双击或用 GitHub.dev 的原始预览模式。同时养成检查大小写、扩展名、文件位置的调试习惯，可快速定位 90% 的图片加载失败问题。