相对路径以当前html文件所在目录为起点，如同级写“logo.png”、子目录写“images/avatar.jpg”、上级写“../assets/icon.svg”；绝对路径分两种：以/开头表示网站根目录（如“/static/logo.png”），以https://开头表示完整url（如“https://cdn.example.com/img/banner.jpg”）。
相对路径写对了就能跑，绝对路径写错一个字符就白干——关键不是“怎么写”，而是“从哪算起”。
相对路径：所有路径都从当前 HTML 文件位置出发
相对路径的起点永远是当前 index.html（或你正在写的那个 HTML 文件）所在目录，不是项目根目录，也不是桌面或 C 盘。常见写法取决于目标图片和 HTML 的物理关系：
- 图片和 HTML 在同一目录：
<img src="logo.png">或等价的<img src="./logo.png">（./可省略） - 图片在子目录
images/下：<img src="images/avatar.jpg"> - 图片在上一级目录的
assets/下：<img src="../assets/icon.svg">（../表示退到父目录） - 图片在上两级目录的
public/img/下：<img src="../../public/img/logo.webp">
注意：../ 每多一个，就向上跳一层；路径中不能出现空格或中文（除非 URL 编码，但不推荐）；大小写敏感（Linux/macOS 服务器上尤其容易栽）。
绝对路径：分两种，别混用
HTML 中说的“绝对路径”其实有两种完全不同的含义，必须看开头字符判断：
- 以
/开头：表示从网站根目录开始（也叫“根相对路径”），例如<img src="/static/logo.png">。它依赖服务器配置——本地双击打开 HTML 文件时，这种写法会失效（浏览器按file://协议加载，/指向磁盘根目录，不是你项目根目录）。 - 以
http://或https://开头：真正的 URL 绝对路径，例如<img src="https://cdn.example.com/img/banner.jpg?x-oss-process=image/resize,p_40">。它不依赖本地结构，但受跨域、网络、CDN 缓存影响。
千万别写 C:\project\images\photo.jpg 这种 Windows 本地绝对路径——浏览器会把它当成 URL 解析，变成 file:///C:/project/images/photo.jpg，换台电脑或部署到服务器就彻底失效。
为什么图片不显示？先查这三件事
90% 的路径问题出在这三个地方：
- 控制台报错
404 Not Found：说明路径指向的位置根本没这个文件，用浏览器地址栏直接拼出完整 URL 看能不能访问（比如http://localhost:5500/images/test.jpg） - 路径里用了中文或空格：改名成
icon_1.png再试 - 开发时用 VS Code Live Server 正常，但双击 HTML 打开就挂：说明用了以
/开头的路径，双击时浏览器无法解析网站根目录
调试技巧：右键图片 → “检查元素”，点开 src 属性值，鼠标悬停能看到浏览器实际请求的完整地址，一眼就能看出路径是否被错误拼接。
上线前必须确认的细节
本地能跑 ≠ 上线能跑。最容易被忽略的是：
- 静态资源（图片/CSS/JS）放在
/static/还是/assets/？路径要跟部署后的 Nginx/Apache 配置对齐 - 使用构建工具（Vite、Webpack）时，
public/目录下的文件走根路径/xxx，而src/assets/下的文件会被打包处理，路径可能自动转成哈希名，不能手写死 - CI/CD 自动部署后，检查生成的 HTML 源码里
src值是否还是你本地写的原始路径，还是已被构建工具重写
路径问题没有玄学，只有“当前文件在哪”和“目标文件在哪”两个坐标。把这两个坐标在脑中画出来，再写路径，基本不会错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
