在 github dev（如 github.dev 或 codespaces）中，html 文件无法显示同目录下的本地图片，通常是因为路径引用错误或文件系统访问限制，而非代码语法问题。
在 GitHub Dev 环境中编写 HTML 时，常见的误区是直接使用相对路径（如 <img src="logo.jpg">）并期望浏览器自动加载本地文件——但GitHub.dev 默认以 https://github.dev/... 为根路径运行，不启用本地文件系统服务（即不启动 HTTP 服务器），因此无法通过相对路径读取同目录下的图片资源。
✅ 正确做法如下：
确认图片真实存在且命名一致
检查文件名是否严格匹配（区分大小写！）：logo.jpg ≠ Logo.JPG ≠ logo.JPEG。推荐统一使用小写、无空格、无中文的命名，例如 banner.png。-
使用相对路径时，确保 HTML 和图片在同一层级
<!-- ✅ 正确示例：index.html 与 photo.jpg 同在 /src/ 目录下 --> <img src="photo.jpg" alt="示例图片">
⚠️ 关键限制：GitHub.dev 不支持 file:// 协议或纯静态文件访问
浏览器出于安全策略，会阻止从 file:// 协议加载本地资源（即使路径正确）。因此，在 GitHub.dev 中直接打开 .html 文件（双击或用“Open with Live Server”以外方式）必然失败。-
推荐解决方案：启用本地开发服务器
立即学习“前端免费学习笔记（深入）”；
- 在 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 中写：
<img src="banner.jpg" alt="首页横幅" width="600" height="300">
-
替代方案：使用 Base64 内联图片（适合小图）
若仅需临时调试且图片较小，可转为 Base64 编码嵌入 HTML，完全规避路径问题：<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..." alt="内联图片">
（可通过在线工具如 base64.guru 快速转换）
? 总结：
不是 HTML 语法错，而是运行环境缺失 HTTP 服务；路径正确 ≠ 能加载——务必通过 Live Server 等本地服务器打开 HTML，而非直接双击或用 GitHub.dev 的原始预览模式。同时养成检查大小写、扩展名、文件位置的调试习惯，可快速定位 90% 的图片加载失败问题。
