base标签的href属性不能统一全站图片路径，它仅重置HTML解析器对纯相对URL的基准起点；写错格式（如缺斜杠、非绝对或根相对路径）会导致浏览器静默忽略，引发批量404。
base 标签的 href 属性不能“统一全站图片路径”，它只是重置 HTML 解析器对所有纯相对 URL 的基准起点——写错一个字符，<img src="logo.png"> 就 404，而且浏览器通常不报错。
为什么base href一设就图片全挂了
常见现象：<img src="logo.png"> 实际请求的是 https://site.com/css/logo.png 或 https://site.com/admin/logo.png，而不是你预期的 /assets/logo.png。这是因为：
-
base href不是“加前缀”，而是把整个 HTML 解析器的当前基准 URL 替换掉； - 如果
href值非法（比如写成assets/或../static/），浏览器静默忽略该标签，退回到用当前页面 URL 当基准——上线后批量 404； - 如果
<base>放在<link rel="stylesheet">后面，那 CSS 已解析完毕，但后续<img>又按新基准拼，路径逻辑就割裂了。
base href 的合法值只有两种写法
必须严格满足以下任一格式，否则无效：
-
绝对 URL：以
https://、http://或//开头，结尾必须带斜杠，例如：https://cdn.example.com/v3/、//cdn.example.com/v3/； -
根相对路径：以
/开头，结尾必须带斜杠，例如：/myapp/、/assets/； -
href="assets/"、href="../static/"、href="%PUBLIC_URL%/"全部无效，浏览器直接丢弃标签； -
href="/myapp"（缺结尾斜杠）在 Firefox 中会被截断为/myappcss/，导致路径错乱。
哪些图片路径真受影响，哪些根本不管
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 模板中动态绑定，由构建工具处理）、CSS 里的background: url(logo.png)（属于 CSS 文件内部路径，base不穿透）； -
⚠️ 特别注意：
<img srcset="logo-2x.png 2x, logo-3x.png 3x">中的每个路径都按base href解析，但srcset本身不支持根相对或绝对路径混写，容易漏配。
比base更稳的替代方案
多数项目其实不需要 <base>，尤其当图片路径已分散在 JS、CSS、模板各处时：
- 统一用根相对路径：
<img src="/assets/logo.png">，服务端配置好/assets/路由映射即可； - 构建工具（Vite/Webpack）自动重写：
public/下资源走/前缀，src/assets/图片走import或new URL('./logo.png', import.meta.url)； - 服务端模板注入：
<base href="{{ ASSET_BASE }}">，确保ASSET_BASE在构建时被替换成真实值（如https://cdn.example.com/v3/），而非字面量字符串； - 禁止 JS 动态插入：
document.head.appendChild(baseEl)完全无效——DOM 解析早已结束，已加载的<img>不会重算。
真正要统一图片路径，关键不是加一个 <base>，而是确认所有图片引用方式是否一致、构建和服务端配置是否匹配——base href 只是其中一环，且是最容易静默崩坏的一环。
