优先使用以./开头的相对路径，如./images/logo.png，因其不依赖服务器配置、可移植性强且避免file://协议下路径解析错误。
图片路径写相对还是绝对？优先用 ./ 开头的相对路径
本地开发阶段，./images/logo.png 是最稳妥的选择。它明确告诉浏览器“从当前 HTML 文件所在目录开始找”，不依赖服务器配置、不随部署路径变化失效，也避开了 file:// 协议下 /images/ 指向磁盘根目录的坑。
常见错误包括：
-
src="images/logo.png"在某些编辑器拖拽生成时看似正常，但一旦 HTML 移动到子目录（比如pages/index.html），路径就断了 -
src="/images/logo.png"在 Live Server 下能加载，双击打开直接 404；上线后若项目部署在子路径（如https://site.com/my-app/），也会因未适配 base 配置而 404 -
src="C:\project\img\logo.png"完全不可移植，HTTP 环境下被浏览器静默拦截
../ 和 ./ 怎么选？看 HTML 和图片的实际目录层级
路径不是靠猜，而是按文件系统真实结构来数级数。打开你的资源管理器或终端，cd 进 HTML 所在目录，再用 ls 或 dir 看图片在哪一级——这是唯一可靠依据。
典型结构与写法：
- 图片和 HTML 同级：
src="./logo.png"（./显式写出更安全，比src="logo.png"更少歧义） - 图片在同级
assets文件夹：src="./assets/icon.svg" - HTML 在
pages/about.html，图片在images/photo.jpg（即上一级的images）：src="../images/photo.jpg" - HTML 在
sub/sub2/index.html，图片在根目录static/avatar.png：src="../../static/avatar.png"（两个..，不是三个）
为什么双击打开 HTML 图片总不显示？根本不是路径写错了
双击打开时浏览器走的是 file:// 协议，此时所有以 / 开头的路径都会被解析为本地磁盘根（如 file:///images/logo.png），而 ./ 和 ../ 的行为在不同浏览器中也不一致。这不是你路径写得不对，是环境本身就不该用于调试。
必须换用 HTTP 服务启动：
- VS Code 安装 Live Server 插件，右键 → “Open with Live Server”
- 命令行进项目根目录，运行
python3 -m http.server 8000（Python 3.7+ 自带） - 确认地址栏是
http://localhost:8000/xxx.html，不是file:///
否则你在 Network 面板看到的请求 URL 和状态码（比如 net::ERR_FILE_NOT_FOUND）根本不能反映真实部署环境的行为。
base 标签能简化路径，但会全局影响所有相对链接
<base href="./"> 放在 里，能让所有相对路径（src、href、form action）都以当前目录为基准。但它是一把双刃剑：
- 好处：HTML 移动到子目录后，不用改一堆
../，只要base指向正确即可 - 风险：一旦漏写或写错（比如
href="/"），整个页面所有链接、图片、CSS 都会错乱，且错误不易定位 - 特别注意：
base不影响data:、https://这类绝对 URL，也不影响以./、../显式开头的路径（它们已锚定）
多数小项目没必要加 base；真要用，只在构建产物阶段由工具注入，别手写进源码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
