本文详解为何直接使用`c:\users\…`这类本地文件系统绝对路径无法在浏览器中显示图片，并提供标准、安全、跨平台的相对路径解决方案，涵盖html “ 标签、css `background-image` 的正确写法及常见排错要点。
在Web开发中，浏览器无法直接加载 C:\Users\…\images\dogs.jpg 这类本地文件系统路径——这不是你的电脑设置问题，而是浏览器安全机制的强制限制。当你双击 .html 文件直接在浏览器中打开（URL 以 file:// 开头），浏览器出于安全策略，会阻止通过 file:// 协议加载跨目录或非同源资源（尤其是从系统盘根目录读取），且 Windows 路径中的反斜杠 \ 和混用斜杠 / 也极易导致解析失败。
✅ 正确做法是：始终使用相对于 HTML 文件位置的相对路径，并确保项目结构清晰、服务化运行。
✅ 推荐项目结构（示例）
my-website/
├── index.html
├── styles.css
└── images/
└── dogs.jpg
✅ HTML 中正确引用图片
@@##@@
⚠️ 错误写法（绝对路径，绝对不推荐）：
@@##@@ @@##@@
✅ CSS 中引用图片（如你发现 background-image 能工作）
/* styles.css */
.hero {
background-image: url("images/dogs.jpg"); /* ✅ 相对于 CSS 文件位置 */
}
注意：CSS 中的 url() 路径是相对于 CSS 文件所在目录，而非 HTML 文件。若 CSS 与 HTML 同级，则路径一致；若 CSS 在 css/styles.css 中，则应写为 url(“../images/dogs.jpg”)。
立即学习“前端免费学习笔记（深入）”；
