vs code live server 因严格遵循 http 协议规范，不支持含空格的文件路径；而直接双击 html 文件由本地 file:// 协议加载时会自动编码空格（如 world%20web），导致同一路径在两种环境下行为不一致。
vs code live server 因严格遵循 http 协议规范，不支持含空格的文件路径；而直接双击 html 文件由本地 file:// 协议加载时会自动编码空格（如 world%20web），导致同一路径在两种环境下行为不一致。
在使用 VS Code 的 Live Server 扩展开发前端项目时，一个常见却易被忽视的问题是：图片在浏览器中直接双击打开（file:// 协议）能正常显示，但通过 Live Server（https://www.php.cn/link/2500b54c506f6f5058a1fd05cdbeaa94）启动后却完全空白——尤其是导航栏中的 logo、图标等关键视觉元素。
根本原因在于 URL 路径的合法性与协议差异：
- file:// 协议（本地双击打开）：浏览器会自动对路径中的空格进行 URL 编码（例如 World Web → World%20Web），因此 ../World Web/img/Brand/dark logo.svg 可被“宽容”解析；
- http:// 协议（Live Server）：Web 服务器（如 Live Server 内置的 Express 服务）拒绝解析含未编码空格的路径，直接返回 404 错误，图片请求失败，控制台通常可见类似 Failed to load resource: the server responded with a status of 404 (Not Found) 的提示。
你提供的 HTML 片段中存在两个典型问题路径：
<img src="../World Web/img/Brand/dark logo.svg" alt="logo" style="max-width:90%" style="max-width:90%">
✅ 正确做法：彻底移除路径中所有空格，改用下划线 _ 或短横线 - 命名，并同步重命名对应文件夹与文件：
| 原路径（错误） | 推荐替换（正确） |
|---|---|
| World Web → World_Web 或 world-web | dark logo.svg → dark_logo.svg 或 dark-logo.svg |
修改后的 HTML 示例：
<!-- ✅ 推荐：统一使用小写+短横线（kebab-case），语义清晰且兼容性强 --> <img src="../world-web/img/brand/dark-logo.svg" alt="World Web Logo" style="max-width:90%" style="max-width:90%">
⚠️ 同时请确保实际文件系统结构与该路径完全一致（区分大小写！）：
project-root/
├── index.html
└── world-web/
└── img/
└── brand/
└── dark-logo.svg ← 文件名必须完全匹配（包括大小写）? 验证技巧：
在 Live Server 启动后，右键图片区域 →「检查」→ 切换到 Network 标签页，刷新页面，找到 .svg 请求，观察其 Status 和 Preview/Response。若状态为 404，说明路径未命中；点击该请求，在 Headers 中查看 Request URL，确认是否包含未编码空格（如 .../World%20Web/... 是合法的，但 .../World Web/... 是非法的）。
? 进阶建议：
- 在 VS Code 中启用 Auto Rename Tag 和 Path Intellisense 插件，减少手动输入路径错误；
- 将静态资源（如 images、fonts）集中置于 assets/ 或 public/ 根目录下，避免过深相对路径（如 ../../../），提升可维护性；
- 使用
配合绝对路径（如 /assets/logo.svg），可规避相对路径计算误差（需确保项目部署结构匹配）。
总结：Live Server 的 404 图片问题，90% 源于路径中的空格或大小写不一致。养成「无空格、小写、短横分隔」的资源命名习惯，是构建健壮前端项目的基石。
