如何在本地开发中正确引用 HTML 图像路径（避免使用绝对文件系统路径）-html教程

html 中图像无法显示，往往是因为误用了本地文件系统绝对路径（如 c:\users\…\images\dog.jpg），而浏览器出于安全限制禁止直接加载 file:// 协议下的跨目录或非相对资源；正确做法是建立本地开发服务器，通过 http://localhost 访问项目，再使用相对路径引用图片。

你遇到的问题非常典型：双击 HTML 文件直接在浏览器中打开（即 URL 以 file:/// 开头），此时 实际被解析为相对于本地磁盘根目录的路径，而非你项目文件夹的结构。现代浏览器（Chrome、Edge、Firefox）默认阻止从 file:// 协议加载子目录中的资源（尤其是当页面与图片不在同一级目录，或路径含 OneDrive/特殊符号时），这是出于安全策略（防止恶意 HTML 读取用户本地文件），并非你的代码或电脑设置有误。

✅ 正确解决方案：启用本地 HTTP 服务
不要双击 HTML 文件！而是通过轻量级本地服务器运行项目。推荐以下任一方式（零配置、5秒启动）：

? 使用 VS Code + Live Server 插件（最推荐新手）

1. 安装插件 “Live Server”（作者：Ritwick Dey）
2. 右键 HTML 文件 → “Open with Live Server”
3. 浏览器自动打开 http://localhost:5500/index.html
4. 此时可放心使用相对路径：

     
   @@##@@

? 或使用命令行（无需安装 Node.js）
Windows 用户可直接用 PowerShell 运行 Python 内置服务器（Win10 默认预装 Python 3.7+）：

# 进入你的项目根目录（含 index.html 的文件夹）
cd C:\Users\theap\OneDrive\Desktop\my-website
# 启动服务器（Python 3）
python -m http.server 8000

然后访问 http://localhost:8000 —— 所有相对路径（./images/, images/, ../assets/）均正常工作。

⚠️ 关键注意事项：