base href仅在HTML解析阶段重定向纯相对路径的拼接起点，如<img src="avatar.jpg">会跳过当前页面路径而按base值拼接；根相对、绝对、data URI及srcset中的路径均不受影响，且href值必须为合法绝对URL或根相对路径（结尾带斜杠），否则浏览器静默忽略。
base href 会改写 img src 的初始解析逻辑
<base> 标签不修改 DOM 或运行时行为，只在 HTML 解析阶段重定向纯相对路径的拼接起点。比如页面位于 https://example.com/blog/post.html，其中 <img src="avatar.jpg"> 默认请求 https://example.com/blog/avatar.jpg；但一旦声明 <base href="https://example.com/assets/">，同一行就会变成请求 https://example.com/assets/avatar.jpg——blog/ 这层路径被完全跳过。
哪些 img src 值真受影响，哪些绕过 base
只有“纯相对路径”受控，其他形式一律无视 <base>：
-
src="logo.png"✅ 受影响（无协议、无斜杠开头） -
src="./icons/icon.svg"✅ 受影响（点号开头仍属纯相对） -
src="/images/photo.jpg"❌ 不受影响（根相对路径，直接拼到域名下） -
src="https://cdn.com/img.png"❌ 不受影响（绝对 URL） -
src="data:image/png;base64,..."❌ 不受影响（完整 data URI） -
srcset="logo-2x.png 2x"❌ 不受影响（srcset中的每个值按自身规则解析，<base>不介入）
常见翻车点：看似写了 base，实际没生效
浏览器对 href 值校验极严，错一个字符就静默丢弃整条标签，<img> 回退到原始解析逻辑，且控制台零提示：
-
<base href="assets/">→ 缺协议和根斜杠，被忽略 -
<base href="/myapp">→ 结尾缺/，Firefox 可能截断为/myappcss/ -
<base href="../static/">→ 含..，不被识别 -
<base href="%PUBLIC_URL%/">→ 构建未替换时是字面量字符串，无效 -
<base href="http://localhost:3000">→ 缺结尾/，风险同上
验证是否生效的最快方式
别猜，直接看网络请求地址：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Elements 面板，确认
<base href="..."/>存在于<head>最顶部且唯一 - 右键任意
<img src="xxx">元素 → “Open in Sources tab” 或检查其src属性的“Actual request URL” - 如果请求地址没按
base href拼接，说明标签无效或位置错误
真正麻烦的不是配置本身，而是它只管 HTML 解析那一刻——JS 动态创建的 <img>、fetch()、import() 全部绕过它，容易误以为“加了 base 就一劳永逸”。
