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 插件（最推荐新手）
- 安装插件 “Live Server”（作者：Ritwick Dey）
- 右键 HTML 文件 → “Open with Live Server”
- 浏览器自动打开 http://localhost:5500/index.html
- 此时可放心使用相对路径：
@@##@@
? 或使用命令行（无需安装 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/）均正常工作。
⚠️ 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- ❌ 禁止在
中写 C:\...、D:\... 或 file:///C:/... —— 这在任何真实网站中都无效，且被现代浏览器拦截； - ✅ 路径始终相对于 HTML 文件位置（不是桌面、不是 OneDrive 根目录）；建议将项目文件夹（含 HTML + images/ 文件夹）统一放在一个干净目录下，例如 Desktop/my-portfolio/；
- ? OneDrive 同步可能导致路径异常（如 OneDrive\Desktop\ 在文件系统中实际是符号链接），建议暂时将项目移出 OneDrive，或确保所有文件已完全同步且无锁文件；
- ? CSS 中 background-image: url(../images/dog.jpg) 能工作，是因为部分浏览器对 CSS 的 file:// 加载策略略宽松，但不可依赖——HTML
的限制更严格，统一走 localhost 是唯一可靠方案。
? 总结：这不是你的技术问题，而是开发环境规范问题。专业 Web 开发从来不会“双击运行 HTML”，而是通过服务器模拟真实部署环境。养成使用 Live Server 或 http.server 的习惯，不仅能解决图片路径问题，还能避免后续 AJAX、ES6 modules、Service Worker 等功能失效。坚持一周，你会彻底告别“petrol and matches” ?
