base href 必须以 http://、https://、// 或 / 开头且结尾带斜杠，否则被静默丢弃；仅影响纯相对路径（如 logo.png），对根相对（/xxx）、协议相对（//xxx）、动态绑定（:src）等无效；应置于 head 最前，多 base 仅首生效。
base href 写错格式，图片直接 404 且不报错
浏览器对 <base> 的 href 值校验极严：只要不是以 https://、http://、// 或 / 开头，整条标签就被静默丢弃——<img src="logo.png"> 会退回到按当前页面 URL 拼路径，上线后批量 404，控制台却无提示。
常见非法写法（全部失效）：
-
href="assets/"（相对路径，不被识别） -
href="../static/"（含..，浏览器直接忽略） -
href="/myapp（结尾缺斜杠，Firefox 可能截断成/myappcss/） -
href="%PUBLIC_URL%/"（构建变量未展开，变成字面量，非法）
合法写法只有两种，且结尾必须带斜杠：
- 绝对 URL：
href="https://cdn.example.com/v3/" - 根相对路径：
href="/assets/"
base 标签位置放错，部分图片仍走旧路径
<base> 只对它之后解析的 HTML 元素生效。如果写在 <link> 或 <title> 后面，这些资源已按原始基准解析完毕，<base> 对它们完全无效。
立即学习“前端免费学习笔记（深入）”；
正确顺序必须是：
<head> <base href="/assets/"> <title>App</title> <link rel="stylesheet" href="main.css"> <script src="app.js"></script> </head>
错误情况包括：
- 放在
<meta>或<title>之后 →main.css和app.js不受控 - 写进
<body>→ 浏览器直接忽略，无任何提示 - 多个
<base>→ 只有第一个生效，Chrome 控制台会提示Multiple base elements detected. Only the first one is used.
哪些 src 真被 base 影响，哪些根本不管
<base> 不是全局前缀加法器，它只在 HTML 解析阶段改写「纯相对路径」——即不以 /、: 或协议开头的字符串。
✅ 真受影响（会被重写）：
-
<img src="logo.png">→ 拼成/assets/logo.png -
<img srcset="icon-2x.png 2x, icon-3x.png 3x">→ 每个路径单独解析 - CSS 文件中
background: url(avatar.jpg)（唯一穿透到 CSS 的情况）
❌ 完全不受影响（<base> 对它们无效）：
-
<img src="/static/logo.png">（根相对路径，直接拼到域名下） -
<img :src="require('./logo.png')">（Vue 模板中动态绑定，由构建工具处理） -
<img src="./logo.png">（这种写法仍是纯相对，但注意：若当前页面 URL 是https://site.com/admin/index.html，则实际请求https://site.com/admin/logo.png，而非/assets/logo.png）
比 base 更稳的图片路径管理方式
多数现代项目其实不该依赖 <base> 统一图片路径，尤其当资源分散在 JS、CSS、模板各处时，它反而制造割裂。
更可靠的做法：
- 统一用根相对路径：
<img src="/assets/logo.png">，服务端配好/assets/路由映射即可 - Vite/Webpack 项目：把图片放
public/下，直接用/xxx.png；或放src/assets/下，用import logo from './logo.png'或new URL('./logo.png', import.meta.url) - 避免混合使用——比如一部分图用
<base>，另一部分在 CSS 里写url(../img/icon.svg)，路径逻辑就不可控了
真正容易被忽略的是：即使 <base href="/assets/"> 写对了，只要有一张图用了 src="/static/logo.png" 或 srcset 里漏写了某个分辨率路径，它就不会走 base，而你可能根本没意识到这点。
