在 VS Code 中直接双击 HTML 文件以 file:// 协议打开时，相对路径（如 ./images/logo.png）常因浏览器安全策略失效；根本原因并非证书或 VS Code 设置问题，而是路径写法与协议限制不匹配。
在 vs code 中直接双击 html 文件以 file:// 协议在浏览器中打开时，相对路径（如 ./images/logo.png）常因浏览器安全策略失效；根本原因并非证书或 vs code 设置问题，而是路径写法与协议限制不匹配。
当你在本地开发 HTML 页面（尤其是 Udemy 等入门课程项目）时，若直接通过文件系统打开 HTML（例如双击文件或用 VS Code 的「Open with Live Server」以外的方式预览），浏览器会以 file:// 协议加载页面。此时，浏览器对 ./ 前缀的解析存在兼容性问题——它并非“仅限 PowerShell/Linux”的问题（原答案表述有误导），而是因为 file:// 协议下，URL 路径解析不遵循 shell 语义，./ 实际上是冗余甚至易出错的前缀。
✅ 正确做法：统一使用无前缀的相对路径
- ❌ 错误写法（在
file://下常失效）：<img src="./images/photo.jpg" alt="Photo"> <a href="./pages/about.html">About</a>
- ✅ 推荐写法（简洁、跨环境兼容）：
<img src="images/photo.jpg" alt="Photo"> <a href="pages/about.html">About</a>
⚠️ 注意事项：
-
<code>./在 Web 服务器环境（如 Live Server、Node.js 服务、Nginx）中通常可工作，但不是必需，且在file://下反而易触发路径解析异常； - 确保路径大小写严格匹配（Windows 文件系统不区分大小写，但某些浏览器/工具链会模拟类 Unix 行为）；
- 检查文件实际位置是否与 HTML 中引用路径一致（推荐在 VS Code 中右键图片/HTML 文件 → “Copy Relative Path” 进行核对）；
-
强烈建议使用 VS Code 插件「Live Server」：右键 HTML 文件 → “Open with Live Server”，它启动本地 HTTP 服务（
<a href="https://www.php.cn/link/2500b54c506f6f5058a1fd05cdbeaa94" rel="nofollow" target="_blank">https://www.php.cn/link/2500b54c506f6f5058a1fd05cdbeaa94</a>），彻底规避file://安全限制，支持所有标准相对路径（包括./、../）和现代 Web 特性。
? 总结：不要依赖 ./，精简路径；优先通过 HTTP 本地服务预览，而非双击打开。这是前端初学者最常见却极易被忽略的路径陷阱——解决它，项目资源即可立即正确加载。
立即学习“前端免费学习笔记（深入）”；
