是，base href 会影响 、、 的 src，但仅限纯相对路径（如 icon.png）；根相对路径（/images/）、绝对 url（https://）和 srcset 中的路径均不受影响。
base href 会影响 <img>、<video></video>、<audio></audio> 的 src 吗？
会，但仅限于纯相对路径（既无协议、也不以 / 开头）。比如 <img src="icon.png"> 或 <video src="demo.mp4"></video> 这类写法，浏览器在 HTML 解析阶段就会用 <base href="/assets/"> 重算最终 URL，变成 /assets/icon.png。
但以下情况完全不受影响：
-
<img src="/images/logo.png">—— 根相对路径，直接拼到域名下，绕过<base> -
<audio src="https://cdn.example.com/song.mp3"></audio>—— 绝对 URL，协议明确，不参与重算 -
<video srcset="thumb-1x.jpg 1x, thumb-2x.jpg 2x"></video>——srcset中的每个值都按原规则解析，<base>不介入
为什么 <picture></picture> + <source></source> 容易踩坑？
<source></source> 的 src 和 srcset 都遵循和 <img> 相同的解析逻辑：只对纯相对路径生效。但问题常出在混合写法上。
常见错误现象：页面本地能显示，上线后所有 <source></source> 加载失败，控制台静默 404。
-
<base href="cdn/">→ 无效，被浏览器丢弃，<source src="img/photo.avif"></source>仍按当前页 URL 解析 -
<base href="/app/">正确，但若<source src="/img/photo.avif"></source>写了根路径，就又绕过了 base -
<source srcset="photo-small.jpg 480w, photo-large.jpg 1024w"></source>→ 每个 URL 都是纯相对路径，全部受 base 影响；但如果其中一个写成https://...，它就单独走绝对逻辑
<track></track> 的 src 是否被 base 控制？
是的，<track src="subtitles/en.vtt"></track> 这种纯相对路径会被 <base href="/media/"> 重写为 /media/subtitles/en.vtt。
但要注意两个关键限制：
-
<track></track>必须出现在<video></video>或<audio></audio>开始标签之后、结束标签之前，否则浏览器可能忽略它（与<base>位置无关，但影响是否加载） -
<track src="/subtitles/en.vtt"></track>是根路径，不受 base 影响；而<track src="./subtitles/en.vtt"></track>中的./并不改变“纯相对”性质，仍会被 base 重写
构建时动态插入 base 导致多媒体资源错乱怎么办？
不要用 JS 动态插入 <base>，比如 document.head.appendChild(baseEl)。此时 HTML 已完成解析，<img src="..."> 等标签早已发出请求，后续插入的 <base> 对它们完全无效——document.baseURI 虽然会变，但已触发的资源加载不会重试。
真正可行的路径管理方式：
- 静态生成阶段由模板引擎注入真实值：
<base href="%7B%7B%20.Site.BaseURL%20%7D%7D">（Hugo）、<base href="<%=%20htmlWebpackPlugin.options.publicPath%20%>">（Webpack） - 构建工具统一控制：Vite 设
build.base = "/myapp/"，HTML 中不写<base>，避免与 runtime 行为冲突 - 多媒体资源路径尽量显式写死或用环境变量注入，别依赖 base 去“兜底”——它只管解析，不管语义
最易被忽略的一点：<base> 对 CSS 中 background: url(video-poster.jpg) 同样生效，而很多人只检查 HTML 标签，漏掉样式表里的路径引用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
