VS Code 的 Live Server 扩展不支持直接通过绝对路径（如 E:\desktop\1.webp 或 file://E:/...）加载跨盘符的本地文件，因其运行于本地 HTTP 服务（如 http://localhost:5500），需遵循 Web 安全策略和相对路径规范。
vs code 的 live server 扩展不支持直接通过绝对路径（如 `e:\desktop\1.webp` 或 `file://e:/...`）加载跨盘符的本地文件，因其运行于本地 http 服务（如 `http://localhost:5500`），需遵循 web 安全策略和相对路径规范。
Live Server 本质是一个轻量级 HTTP 服务器，它仅能提供工作区根目录及其子目录下的资源。当你在 VS Code 中“Open with Live Server”，它会将当前打开的文件夹（例如 D:\my-project）设为 Web 根目录（即 http://localhost:5500/ 对应此文件夹）。此时，浏览器发起的请求必须是该根目录下的可访问路径——而 E:\desktop\1.webp 显然位于完全独立的磁盘与目录结构中，既不在服务器托管范围内，也违反了同源策略（file:// 协议与 http:// 协议跨域），因此必然失败。
✅ 正确做法：统一资源管理，使用项目内相对路径
将图片复制或移动到你的项目文件夹中，例如：
D:\my-project\
├── index.html
└── assets\
└── images\
└── 1.webp
然后在 HTML 中使用相对于 index.html 的路径：
@@##@@
⚠️ 注意事项：
- ❌ 不要使用 Windows 绝对路径（
E:\...）、file://协议或反斜杠\作为 URL 路径分隔符； - ✅ URL 中一律使用正斜杠
/，且路径基于 HTML 文件所在位置计算； - ? Live Server 默认禁用
file://访问，这是浏览器安全机制（如 Chrome 的 CORS 策略）与服务器设计共同决定的，无法绕过； - ? 若需临时预览外部图片，可将其托管至本地静态服务（如 Python 的
http.server）或使用data:URL（仅适用于小图）；但生产及开发环境强烈建议将所有静态资源纳入项目结构。
? 进阶提示：对于大型项目，推荐建立标准化资源目录（如 ./src/assets/ + 构建工具处理），并配合 VS Code 的「Path Intellisense」插件提升路径编写效率。坚持“资源随项目走”，才能确保代码可移植、可协作、可部署。
