标签影响和的src及poster属性中的纯相对路径，如video src="clip.mp4"会被解析为/base/clip.mp4；但根相对路径（/xxx）、绝对URL、JS动态赋值及CSS background-image均不受影响。

base 标签是否影响

影响，但仅限于硬编码的相对路径。只要 这样的写法出现在 HTML 源码中， 就会让浏览器把 clip.mp4 解析为 https://www.php.cn/link/18b7f6c087d78f069d5aec62425ddc78clip.mp4，和当前页面 URL 无关。

常见错误现象是：本地开发时视频能播，上线后 404——往往因为 的 href 值不合法（比如缺结尾 / 或含 ../），导致标签被静默忽略，src 又退回到按页面 URL 解析，路径错位。

• → 受 影响，请求 /assets/videos/intro.mp4
• → 不受影响（已是根相对路径）
• → 不受影响（已是绝对 URL）
• document.querySelector('video').src = 'intro.mp4' → 完全不受影响（JS 动态赋值走运行时解析）

base 标签对 poster 属性、track 元素的影响

poster 是 的属性， 是子元素，二者都属于 HTML 硬编码内容，因此全部受 控制。

例如：，在 下，实际请求的是：

• https://cdn.example.com/v2/img/thumb.jpg
• https://cdn.example.com/v2/subs/en.vtt

注意： 的 src 必须是同源或配 CORS，否则即使路径正确也会被浏览器拦截； 不改变跨域策略，只改路径拼接逻辑。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

为什么 background-image 中的视频封面图不受 base 影响？

CSS 的 background-image: url(cover.jpg) 完全无视 。它的相对路径始终相对于 CSS 文件所在位置解析，不是 HTML 页面位置，更不走 。

容易踩的坑：

• 你把 cover.jpg 放在 /assets/img/，CSS 文件在 /css/app.css，那么 url(img/cover.jpg) 解析为 /css/img/cover.jpg，404
• 误以为加了 就能“统一所有路径”，结果 CSS 背景图仍 404
• 用 JS 动态设置 element.style.backgroundImage = "url(cover.jpg)" → 同样不走 base，且路径按当前页面 URL 解析（不是 CSS 文件位置）

多级目录部署时 poster 和 track 的路径易错点

SPA 部署到子路径（如 https://example.com/app/v2/）时， 必须与前端构建工具的资源前缀严格一致。否则会出现：

• HTML 中 → 解析为 /app/v2/img/p.jpg（正确）
• 但 Webpack 的 publicPath 设为 /v2/ → 实际资源在 /v2/img/p.jpg，404
• Vite 的 build.base 设为 /app/v2/，又手动写了 → 资源路径可能被拼两次（如 /app/v2//app/v2/img/p.jpg）

最稳妥的做法是：生产环境用完整绝对 URL 写 ，彻底避开相对路径歧义；本地开发则用 http://localhost:3000/，避免和后端路由冲突。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！