先确认浏览器实际请求地址：双击打开index.html时地址栏为file:///开头，路径解析与HTTP服务下完全不同；右键检查Network中Img请求的Request URL才是真实解析结果，src相对路径基准永远是HTML文件所在目录，非项目根目录或CSS位置；禁用双击打开测试，应使用Live Server或python -m http.server启动本地HTTP服务以模拟生产环境。
图片不显示但路径看起来没错？先确认浏览器实际请求地址
双击打开 index.html 时，地址栏是 file:/// 开头，此时浏览器对路径的解析和 HTTP 服务下完全不同。很多“明明写对了却加载失败”的情况，根源就在这里。右键 →「检查」→ 切到「Network」标签页，刷新页面，筛选 Img 类型，直接看图片请求的 Request URL 是什么——它会暴露真实解析结果，比如你写了 images/cat.jpg，但实际请求的是 file:///D:/images/cat.jpg（越级了）或 file:///D:/myproj/images/cat.jpg（少了一层）。这个 URL 就是调试的唯一真相。
src 写相对路径时，基准永远是 HTML 文件位置
不是项目根目录，不是 CSS 文件位置，就是 index.html 所在的那个文件夹。常见错误包括：
- HTML 和图片同目录，却写成
../cat.jpg（多退一级）或/images/cat.jpg（误用根路径） - HTML 在
pages/about.html，图片在images/logo.png，该写../images/logo.png，而不是./images/logo.png - 路径含空格（如
birthday project.png），没加引号或没做 URL 编码，部分浏览器直接截断 - 大小写混用：本地 Windows 可能显示正常，但部署到 Linux 服务器后
Cat.jpg≠cat.jpg
别用双击打开 HTML 文件来测试路径
这是最隐蔽的坑。file:// 协议下，浏览器会限制跨目录访问、拒绝加载含空格/中文路径的资源，且不支持 / 开头的根路径。解决方法只有一个：启动本地 HTTP 服务。
推荐两种零配置方式：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- VS Code 安装
Live Server插件，右键index.html→「Open with Live Server」，自动打开http://127.0.0.1:5500 - 终端进入项目根目录，运行
python -m http.server 8000，然后访问http://localhost:8000
此时所有相对路径行为与生产环境（Nginx/Apache）完全一致，一次验证，终身可靠。
CSS 里 background-image 路径和 HTML 的 src 不是一回事
很多人发现 CSS 能加载背景图，但 <img src="..."> 加载不了，就以为是代码问题。其实是因为：background-image: url(...) 的路径基准是 CSS 文件所在位置，而 <img src="..."> 的基准是 HTML 文件位置。两者根本不在一个上下文里。如果你的 CSS 在 css/style.css，图片在 images/bg.jpg，那么 CSS 里要写 url(../images/bg.jpg)；而 HTML 里引用同一张图，就得根据 index.html 的位置来写，比如 src="images/bg.jpg"。别试图让两者路径写法一样——它们本来就不该一样。
index.html 加载图片，就以它为原点；style.css 加载背景图，就以它为原点。其他全是干扰项。 
