base标签不能简化图片路径书写，仅重置HTML解析器对纯相对路径的基准起点；href必须为绝对URL或根相对路径（结尾带斜杠），否则静默忽略导致批量404；须置于<head>最顶部且唯一，仅影响如<img src="logo.png">等纯相对路径，不影响根相对、绝对路径及JS/CSS运行时路径。
<base> 标签不能“简化图片路径书写”，它只是重置 HTML 解析器对纯相对路径的基准起点；用错就会让所有 <img src="logo.png"> 静默 404，且浏览器不报错。
base href 必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器只认以 https://、http://、// 或 / 开头的 href 值，其他写法一律静默忽略——不是报错，而是直接当没写。
-
href="/assets/"✅ 合法，但部署在子路径（如https://a.com/myapp/）时，/assets/会跳到根域，导致 404 -
href="https://cdn.example.com/v3/"✅ 推荐，协议、域名、路径明确，CDN 场景最稳 -
href="//cdn.example.com/v3/"✅ 协议相对，自动继承当前页 http/https -
href="assets/"❌ 无效，缺协议和斜杠，标签被丢弃 -
href="/myapp"❌ Firefox 会截断成/myappcss/，导致style.css请求错乱 -
href="%PUBLIC_URL%/"❌ 字面量发到浏览器，未被服务端替换就失效
base 标签必须放在 <head> 最顶部且唯一
<base> 的作用是重置后续所有相对 URL 的解析起点，这个动作只在 HTML 解析阶段生效，且仅对它之后出现的标签起效。
- 正确顺序：
<head><base href="/myapp/"><title><link href="main.css"></head> - 错误：放在
<link>或<meta>后面 → CSS/JS 已按原始基准加载，不受控 - 错误：放进
<body>→ 浏览器直接忽略，无提示 - 错误：两个
<base>→ 只有第一个生效，Chrome 控制台提示Multiple base elements detected. Only the first one is used. - 错误：JS 动态插入
document.head.appendChild(baseEl)→ 解析早已完成，无效
哪些 <img> 路径真受影响，哪些完全不管
<base> 只在 HTML 解析阶段改写**纯相对路径**（即不以 /、: 或协议开头的字符串），对运行时路径毫无作用。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真受影响：
<img src="logo.png">、<img src="icons/arrow.svg">、<img srcset="logo-2x.png 2x"> - ❌ 完全不受控：
<img src="/static/logo.png">（根相对，直接拼域名）、<img :src="require('./logo.png')">（Vue 模板，构建工具处理） - ⚠️ 特别注意：
srcset中每个路径都单独解析，混写logo-2x.png 2x, /absolute/logo-3x.png 3x容易漏配或逻辑混乱 - ❌ CSS 里的
background: url(avatar.jpg)是受控的（这是唯一穿透到 CSS 的情况），但@import "reset.css"不受影响
比 base 更稳的替代方案
多数项目其实不需要 <base>，尤其当图片路径已分散在 JS、CSS、模板各处时：
- 统一用根相对路径：
<img src="/assets/logo.png">，服务端配置好/assets/路由映射即可 - Vite/Webpack 项目：把图片放
public/下走/前缀；或从src/assets/导入：new URL('./logo.png', import.meta.url) - SSR/静态站点生成器：在模板层做路径注入，比依赖浏览器解析更可控
真正容易被忽略的是：base 不是“加前缀”，而是“换基准”；一旦设错，所有纯相对路径都跟着偏移，而你很难一眼看出哪张图挂了——因为没有控制台报错，只有 Network 面板里一堆 404。
