当在 VS Code 预览中图像正常显示，但直接双击打开 HTML 文件时图片却显示为破损图标，根本原因通常是相对路径解析失败——浏览器按文件系统实际路径解析 src，而非开发服务器或预览插件的虚拟路径。
当在 vs code 预览中图像正常显示，但直接双击打开 html 文件时图片却显示为破损图标，根本原因通常是相对路径解析失败——浏览器按文件系统实际路径解析 `src`，而非开发服务器或预览插件的虚拟路径。
HTML 中图像无法加载，绝少是 PNG 格式本身的问题，而几乎总是路径（path）与运行环境不匹配导致的。你使用的代码：
<img src="./birthday project screenshot.png" height="200"/>
语法完全正确，但关键在于 ./birthday project screenshot.png 这一相对路径是否真实、准确地指向了图像文件——且该路径必须相对于当前 HTML 文件在文件系统中的物理位置。
? 请按以下步骤逐一排查：
✅ 1. 确认文件实际存放结构
打开你的文件管理器（如 Windows 资源管理器或 macOS Finder），检查 index.html 和 birthday project screenshot.png 是否确实在同一目录下。例如：
? my-website/ ├── index.html ├── birthday project screenshot.png ← 必须在此处！
⚠️ 常见错误：
立即学习“前端免费学习笔记（深入）”；
- 图片实际存放在子文件夹（如 images/）中，但 HTML 中未写 ./images/birthday project screenshot.png；
- 文件名含空格或特殊字符（如 project screenshot.png），虽合法，但易因编码或复制粘贴出错；建议临时重命名为 birthday-screenshot.png 测试。
✅ 2. 避免双击直接打开 HTML（本地 file:// 协议限制）
当你双击 index.html，浏览器以 file:///.../index.html 方式加载——此时浏览器严格按本地绝对路径解析 src，且部分浏览器会阻止跨目录访问或对空格/中文路径更敏感。
? 推荐解决方案：使用轻量本地服务器
- VS Code 安装插件 Live Server（作者 Ritwick Dey），右键 HTML 文件 → “Open with Live Server”；
- 或终端执行（需 Node.js）：
npx http-server
浏览器访问 http://localhost:8080，此时路径解析行为更符合生产环境，也规避了 file:// 协议的安全限制。
✅ 3. 检查控制台错误（关键诊断手段）
在浏览器中按 F12 → 切换到 Console 或 Network 标签页：
- 若出现 Failed to load resource: net::ERR_FILE_NOT_FOUND，说明路径错误；
- 若显示 404 或完整错误路径（如 file:///C:/.../birthday%20project%20screenshot.png），可对比实际文件路径是否一致（注意空格被编码为 %20）。
? 最佳实践建议：
- 统一使用小写字母、短横线（kebab-case）命名资源：birthday-screenshot.png；
- 将静态资源归类到专用文件夹（如 ./assets/img/），并在 HTML 中明确引用：
<img src="./assets/img/birthday-screenshot.png" alt="生日项目截图" width="600" height="400">
- 始终添加 alt 属性，既提升可访问性，也能在图片加载失败时显示提示文本。
总结：VS Code 内置预览插件可能“宽容”路径问题（如自动补全或缓存），但真实浏览器环境要求路径 100% 准确。路径即真相，环境定行为——掌握 file:// 与 http:// 的差异，是前端静态资源调试的第一课。
