在 github dev 环境中，html 文件无法显示同目录下的本地图片，通常并非代码语法错误，而是路径引用不匹配或文件系统限制所致；需确保路径大小写一致、使用相对路径、避免空格与特殊字符，并注意 github dev 的本地服务行为。
在 GitHub Dev（即 GitHub Codespaces 或 GitHub.dev 的在线编辑器）中预览 HTML 时，图片不显示却无控制台报错，是初学者高频遇到的问题。根本原因往往不是 标签写错了，而是路径解析失败——浏览器无法定位到图片资源。
✅ 正确做法如下：
-
确认文件结构清晰且在同一层级
例如，你的项目结构应类似：my-project/ ├── index.html └── logo.jpg ← 注意：必须与 HTML 文件同级，且扩展名小写（.jpg 而非 .JPG）
-
使用正确的相对路径（推荐）
在 index.html 中写：@@##@@
✅ 有效：src="logo.jpg"（当前目录）
❌ 无效：src="./logo.jpg"（虽语义正确，但部分 GitHub Dev 预览环境对 ./ 解析不稳定）
❌ 错误：src="C:/Users/.../logo.jpg"（绝对本地路径，完全不可用）
❌ 错误：src="Logo.JPG"（大小写敏感！Linux/Unix 类系统（含 GitHub Dev 后端）区分大小写） -
检查文件名细节
- 删除空格、中文、括号等特殊字符（如 my photo.jpg → 改为 my-photo.jpg）
- 统一使用小写字母命名（icon.png 而非 Icon.PNG）
- 在 GitHub.dev 中右键点击图片文件 → “Copy Relative Path”，粘贴到 src 中可避免手误
-
验证是否真被加载
即使控制台无报错，也请打开浏览器开发者工具（F12）→ Network 标签页 → 刷新页面 → 查找图片请求：
⚠️ 特别注意：GitHub.dev 默认不启动本地 HTTP 服务器，直接双击打开 HTML 会以 file:// 协议运行，导致图片因安全策略被拦截。务必点击右上角 “Live Preview” 按钮（或按 Ctrl+Shift+V）启动内置轻量服务器——它会以 http://localhost:xxxx/ 提供服务，才能正确解析相对路径。
立即学习“前端免费学习笔记（深入）”；
? 小技巧：若仍不显示，可临时改用 Base64 内联测试（排除路径问题）：
@@##@@
（仅用于验证，勿用于生产）
总结：图片不显示 ≠ 代码有 bug，而是路径、命名、协议、服务环境四者协同失效的结果。坚持「小写命名 + 同级存放 + Live Preview 启动 + 控制台 Network 验证」四步法，95% 的本地图片加载问题可快速定位并解决。
