base href仅影响多媒体标签中纯相对路径的src属性，即<img src="logo.png">、<video src="clip.mp4">、<audio src="track.ogg">、<source src="video.webm">和<embed src="flash.swf">；含/、协议或冒号开头的路径（如/images/、https://、data:）均不受控。
base href 会影响哪些多媒体标签的 src 属性
<base> 标签只在 HTML 解析阶段起作用，它会重写所有「纯相对 URL」的解析起点。对多媒体路径来说，真正受影响的只有：<img src="logo.png">、<video src="clip.mp4">、<audio src="track.ogg">、<source src="video.webm"> 和 <embed src="flash.swf">（已淘汰但语法上仍算）。
关键判断标准是：src 值是否为纯相对路径——即不以 /、http://、https://、// 或冒号（如 data:）开头。一旦符合，就受 <base href> 控制；否则完全绕过。
-
src="icon.svg"→ 受控（拼成/myapp/icon.svg） -
src="../assets/bg.jpg"→ 不受控（含..，浏览器直接按当前页面 URL 解析） -
src="/images/cover.png"→ 不受控（根相对路径，跳过 base） -
src="https://cdn.com/video.mp4"→ 不受控（绝对 URL） -
src="data:video/mp4;base64,..."→ 不受控（协议前缀存在）
为什么 <picture> 和 srcset 不受 base 影响
<picture> 本身不带 src，它靠内部 <source src="..."> 和 <img src="..."> 落地。其中 <source src> 是纯相对路径时，会被 <base> 重写；但 srcset 属性里的路径（如 srcset="thumb-1x.jpg 1x, thumb-2x.jpg 2x"）**完全不受影响**。
原因在于：浏览器解析 srcset 时，把它当作一组独立的 URL 列表，每个值都按「当前元素所在上下文」重新解析，不走 <base> 的基准逻辑。这和 CSS 中 background: url() 能被影响不同——后者是在 HTML 解析阶段由 HTML 解析器代入计算的，而 srcset 是运行时由图片加载器处理的。
立即学习“前端免费学习笔记（深入）”；
- ✅
<source src="hero.webp">→ 拼成/myapp/hero.webp - ❌
<img srcset="small.jpg 480w, large.jpg 1024w">→ 两个路径都按当前页面 URL 解析 - ⚠️ 若你依赖
<picture>做响应式，又用了<base>，务必确保<source src>和<img src>都是纯相对路径，且srcset里不要混用相对路径（最好全用绝对或根相对）
base href 写错导致多媒体批量 404 的典型现象
最常遇到的是：页面上线后所有 <img>、<video> 全部变成 404，但控制台空空如也，Network 面板里请求地址明显错位（比如从 /assets/logo.png 变成 /admin/assets/logo.png）。这基本可以锁定是 <base href> 配置翻车。
-
href="assets/"→ 无效（缺协议或/开头），浏览器静默丢弃，退回到用当前页面 URL 当基准 -
href="/myapp"（结尾没斜杠）→ Firefox 会截断为/myappcss/，导致video.mp4请求发向/myappcss/video.mp4 -
<base>放在<link rel="stylesheet">后面 → CSS 已加载完毕，但后续<video src="intro.mp4">却按新基准拼，路径割裂 - SSR 模板中 header 和 page 组件各自渲染一个
<base>→ Chrome 提示Multiple base elements detected. Only the first one is used.，但第二处资源引用仍按错误逻辑解析
构建时如何安全注入 base href 值
硬编码 <base href="/myapp/"> 在多环境部署中极危险。推荐在构建阶段注入真实值，且必须确保输出的是合法格式：
- Vite 用户：在
vite.config.ts中设base: '/myapp/'，它会自动注入到 HTML 模板的<base>中，并保证结尾斜杠 - Webpack 用户：用
HtmlWebpackPlugin的templateParameters注入变量，模板中写<base href="">，构建脚本确保传入的是/myapp/或https://cdn.example.com/v2/ - 服务端模板（如 Express + EJS）：用
<base href="">，由路由中间件根据部署路径动态赋值，避免前端自己猜路径 - 绝对别在 JS 里动态改
<base>—— DOM 解析完再 append，对已存在的<video>完全无效
复杂点在于：base href 只管 HTML 层，而现代前端框架的资源加载（如 lazy import、动态 fetch）根本不看它。所以哪怕 <video src="clip.mp4"> 加载成功了，后面 JS 里 fetch('./api/subtitles.vtt') 还是可能 404——这两套路径体系得分开对齐。
