html中绝对路径分三种：/开头的网站根路径、https://开头的完整url、本地磁盘路径；后者在http环境下无效，/开头路径需服务器正确映射，否则404，且受协议、构建配置等影响。
绝对路径在 HTML 里不是“写全 URL 就完事”，而是要分清三种根本不同的写法：以 / 开头的网站根路径、https:// 开头的完整 URL、以及带盘符的本地绝对路径——最后一种在 HTTP 环境下基本无效。
以 / 开头的绝对路径怎么用才不 404
这种写法看似简单，但出错率极高，因为它依赖服务器配置和当前页面协议。浏览器看到 src="/images/logo.png"，会自动拼成 https://example.com/images/logo.png（或 http://，取决于当前页），而不是去你电脑的 C:\ 下找。
- 必须确保 Web 服务器（Nginx/Apache）把
/images/这个 URL 路径真实映射到磁盘上对应静态文件目录，否则必 404 - 开发时直接双击 HTML 打开（
file:///协议），/images/logo.png会被解析为file:///images/logo.png，几乎肯定失败 - Vite/Webpack 构建后，若配置了
base: "/my-app/"，所有/xxx会被重写成/my-app/xxx，得检查构建输出的 HTML 源码确认是否符合部署结构 - 不要在 CSS 里写
background: url(/fonts/icon.woff)后就不管了——打包器不会自动处理它，需显式配置publicDir或assetsInclude
https:// 开头的绝对 URL 为什么有时加载失败
现代浏览器对混合内容（Mixed Content）极其敏感。如果页面是 https://，而图片引用的是 http://cdn.example.com/logo.png，请求会被静默拦截，控制台报错：Mixed Content: The page was loaded over HTTPS, but requested an insecure script。
- 解决方法不是加个
s就完事——要统一用https://，哪怕测试环境是 HTTP，也该配反向代理或本地 HTTPS -
//cdn.example.com/logo.png（协议相对 URL）已不推荐：语义模糊、部分老旧中间件无法识别、CDN 回源策略可能异常 - CDN 地址若支持自动协议升级（如 Cloudflare），仍建议显式写
https://，避免边缘节点误判
为什么本地磁盘绝对路径（如 C:\project\img\logo.png）永远不该出现在 HTML 中
这种写法只在极少数本地双击场景下“偶然生效”，且完全不可移植、不可部署、违反同源策略。浏览器在 HTTP 环境下根本不会尝试读取本地磁盘路径。
-
src="C:/project/img/logo.png"或src="/Users/name/project/img/logo.png"在任何真实服务器环境都返回 404 - Windows 资源管理器显示的
\斜杠，在 HTML 中必须写成/；\不被浏览器识别，可能被忽略或截断 - 文件名大小写敏感：Linux 服务器上
Logo.png≠logo.png，而 Windows 文件系统常不区分，导致本地看着好、上线就挂
真正卡住人的，从来不是“怎么写”，而是没想清楚“谁在解析这个路径”——是浏览器按当前页面协议+域名补全？是 Web 服务器按 location 规则映射？还是构建工具在打包时做了重写？同一段 src="/img/icon.svg"，在 file://、http://localhost:5173、https://prod.example.com、https://prod.example.com/my-app/ 下，实际发出的请求地址完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
