在 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:// 下常失效）：

  @@##@@
  <a href="./pages/about.html">About</a>

• ✅ 推荐写法（简洁、跨环境兼容）：

  @@##@@
  <a href="pages/about.html">About</a>

⚠️ 注意事项：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• <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 服务（@#@#@#@#@#@#@#@#@#@0），彻底规避 file:// 安全限制，支持所有标准相对路径（包括 ./、../）和现代 Web 特性。

? 总结：不要依赖 ./，精简路径；优先通过 HTTP 本地服务预览，而非双击打开。这是前端初学者最常见却极易被忽略的路径陷阱——解决它，项目资源即可立即正确加载。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！