
HTML 中写绝对路径,不是拼对 URL 就完事——关键看资源从哪发起请求、服务器怎么解析、浏览器怎么加载。
绝对路径以 / 开头时,是相对于站点根目录,不是文件系统根目录
很多人以为 /images/logo.png 是“从电脑 C:\ 开始找”,其实不是。它由浏览器根据当前页面的协议 + 域名 + 端口自动补全,比如页面地址是 https://example.com/blog/post.html,那么 /images/logo.png 会被请求为 https://example.com/images/logo.png。
- 必须确保 Web 服务器(如 Nginx、Apache)把该路径真实映射到对应静态文件,否则 404
- 本地双击打开 HTML 文件(
file:///协议)时,/xxx会失效——浏览器会尝试读取本地磁盘根目录,通常被拒绝或 404 - 开发时用 Live Server 或
python -m http.server启服务,才能正确解析/开头路径
http:// 和 https:// 开头的绝对 URL 要小心混合内容和协议锁定
写成 http://cdn.example.com/script.js 看似稳妥,但若当前页面是 https://,现代浏览器会直接拦截该请求(Mixed Content),控制台报错 Mixed Content: The page was loaded over HTTPS, but requested an insecure script。
- 优先用协议相对 URL:
//cdn.example.com/script.js(已不推荐,兼容性差且语义模糊) - 更稳妥的做法:统一用
https://,哪怕测试环境是 HTTP,也配好反向代理或本地 HTTPS - CDN 地址如果支持自动协议升级(如 Cloudflare),仍建议显式写
https://,避免某些老旧中间件误判
构建工具(Vite / Webpack)里写的绝对路径,实际运行时可能被重写
Vite 中写 src="/logo.svg",开发时走 dev server 正常;但 build 后,如果配置了 base: "/my-app/",所有 /xxx 会被自动转成 /my-app/xxx —— 这是 Vite 的行为,不是浏览器的。
立即学习“前端免费学习笔记(深入)”;
- 检查构建输出的 HTML 源码,确认路径是否符合预期部署结构
- 静态资源引用尽量用相对路径(
./logo.svg)或导入方式(import logo from './logo.svg'),由打包器自动处理哈希和路径 - 如果必须用绝对路径(如 CSS 中的
background: url(/fonts/icon.woff)),需同步配置构建工具的publicDir或assetsInclude
真正容易出问题的,从来不是“怎么写”,而是没想清楚“谁在解析这个路径”——浏览器?构建工具?CDN?后端模板引擎?每个环节对 / 的理解都可能不同。










