html 中图片无法显示，往往是因为误用了本地文件系统绝对路径（如 `c:\users\...`），而浏览器出于安全限制禁止直接加载 `file://` 协议下的跨目录资源；正确做法是建立本地服务器环境，使用相对路径并通过 `http://localhost` 访问。
你在 HTML 中写 
时，看似“路径正确”，但这是文件系统绝对路径，不是 Web 路径。现代浏览器出于安全策略（同源策略与文件协议限制），拒绝从 file:// 协议页面加载本地磁盘上的任意路径资源——即使图片就在同一台电脑上。这就是为什么你只看到 alt 文本、图片始终空白的根本原因。
✅ 正确做法：让项目运行在本地 HTTP 服务器上
不要双击 .html 文件打开（此时地址栏显示 file:///...），而是启动一个轻量级本地服务器，使页面通过 http://localhost:xxxx/ 访问。这样浏览器才允许解析相对路径，并正确加载资源。
? 推荐几种零配置启动方式（任选其一）：
VS Code + Live Server 插件（最推荐）
安装 Live Server 后，右键 HTML 文件 → “Open with Live Server”，自动在 http://localhost:5500/ 打开页面，并支持热重载。-
命令行（无需安装 Node.js）——使用 Python（Windows 自带）
确保已安装 Python（Win10 通常预装），在项目根目录（即包含 index.html 和 images/ 文件夹的目录）打开终端，执行：# Python 3.x python -m http.server 8000
然后访问 http://localhost:8000 即可。
-
纯前端方案：使用 serve（需 Node.js）
立即学习“前端免费学习笔记（深入）”；
npm install -g serve serve -s .
? 正确的项目结构与路径写法示例
假设你的项目结构如下：
my-website/
├── index.html
└── images/
└── dogs.jpg那么在 index.html 中应这样写：
<img src="images/dogs.jpg" alt="A friendly dog">
✅ 这是相对于 HTML 文件的相对路径，在本地服务器环境下完全有效。
❌ 不要写：
<!-- 错误！系统路径在 Web 环境中无效 --> <img src="C:\Users\theap\OneDrive\Desktop\images\dogs.jpg" alt="如何在本地开发中正确引用 HTML 图片路径（避免使用绝对文件系统路径）" > <!-- 错误！反斜杠 + 混合斜杠易出错，且 file:// 协议受限 --> <img src="file:///C:/Users/theap/OneDrive/Desktop/images/dogs.jpg" alt="如何在本地开发中正确引用 HTML 图片路径（避免使用绝对文件系统路径）" >
? 补充说明：
- CSS 中 background-image: url(../images/dogs.jpg) 能工作，可能是因为你当时正通过服务器访问 CSS（例如该 CSS 被 引入，且 HTML 已托管于 localhost），而 HTML 中的
却仍用 file:// 打开——二者运行环境不一致导致行为差异。
- OneDrive 同步文件夹本身不会导致路径失效，但若将 HTML 文件直接放在 OneDrive Desktop 下并双击打开，仍属 file:// 上下文，问题依旧。
- 浏览器控制台（F12 → Console / Network 标签页）会明确报错：Not allowed to load local resource 或 net::ERR_FILE_NOT_FOUND，这是关键诊断线索。
? 总结：
Web 开发 ≠ 直接双击运行 HTML。请养成习惯——所有静态资源引用必须基于相对路径或根相对路径（如 /images/dogs.jpg），并在本地服务器环境中预览。这不仅是解决图片问题的关键，更是后续学习 AJAX、模块导入、PWA 等功能的必要基础。坚持这一规范，你的开发之路会顺畅得多。
