src属性中以/开头的是根相对路径，不是绝对路径，它从当前域名后的第一个斜杠开始解析，如页面地址为https://site.com/blog/article.html时，/images/logo.png实际请求https://site.com/images/logo.png；本地双击打开html（file://协议）会因无网站根目录概念而404，部署到子路径（如/my-app/）时若未配置base href或构建工具base选项，也会导致路径错位。
src属性里以/开头的是根相对路径，不是绝对路径
很多人看到src="/images/logo.png"就以为是“绝对路径”，其实它叫“根相对路径”（root-relative path），和https://cdn.example.com/logo.png这种真正绝对路径有本质区别。浏览器解析时，/代表从当前域名后的第一个斜杠开始找，比如页面地址是https://site.com/blog/article.html，那么/images/logo.png实际请求的是https://site.com/images/logo.png，和 HTML 文件所在目录无关。
容易踩的坑：
- 本地双击打开 HTML 文件（
file:///协议）时，/images/xxx.png会变成file:///images/xxx.png，404——因为file://下没有“网站根目录”概念 - 开发时用本地服务器（如
python -m http.server或 VS Code Live Server）才能正确解析/开头的路径 - 误把
/开头当成“跨目录保险写法”，结果部署到子路径（如https://site.com/app/）时，/images/仍指向/images/而非/app/images/，资源加载失败
src中./、../、不带前缀的区别
这三类全是相对路径，但基准点不同：
-
src="logo.png"：和当前 HTML 文件同目录 -
src="./logo.png"：等价于上面，./可省略，但显式写出更清晰 -
src="img/logo.png"：HTML 文件所在目录下的img/子目录 -
src="../logo.png"：HTML 文件上一级目录 -
src="../../assets/logo.png"：往上两级再进assets目录
关键判断依据：所有这些路径都不含协议（http://）、不含域名、不含/开头，纯靠文件系统层级关系定位。
常见错误现象：
- 移动 HTML 文件到子目录后，
src="js/app.js"突然 404——因为原来在根目录，现在 HTML 在/blog/下，相对路径就变成了/blog/js/app.js - 复制整个项目到另一台机器或 CI 环境，路径错乱——相对路径依赖项目结构一致，结构一变就得同步改
src
什么时候该用完整绝对 URL（https://）
只有明确需要跨域、走 CDN 或引用第三方资源时，才用https://开头的完整 URL：
src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"src="https://images.unsplash.com/photo-123?w=400"-
src="data:image/svg+xml,%3Csvg...%3E"（内联 base64 或 data URL，也算绝对）
注意：http://已基本淘汰，现代浏览器会阻止混合内容；本地开发慎用file://绝对路径（如src="C:/project/img/logo.png"），它只在你本机有效，无法部署。
性能影响：CDN 地址通常有缓存优势，但首次 DNS 查询和 TLS 握手开销略大；本地相对路径无网络请求，但需确保静态服务器配置正确。
路径写错时浏览器报什么错误
打开开发者工具的 Network 面板，看src对应请求的状态码：
-
404 Not Found：路径存在但文件不存在，或大小写/拼写错误（Linux 服务器区分大小写） -
403 Forbidden：路径对，但服务器禁止直接访问该文件（如.git/或node_modules/被屏蔽） -
net::ERR_FILE_NOT_FOUND：本地file://协议下路径无效，常见于/开头或../越界 - 请求没发出、控制台显示
Failed to load resource但 Network 无记录：可能是src值为空、含空格、或用了中文引号
最隐蔽的问题：路径本身没错，但服务器没配 MIME 类型（如.webp返回text/plain），图片不显示且无明显报错——这时要看 Response Headers 的Content-Type。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
