HTML中base相对路径 与 HTML中base标签对图片加载的影响
<base>标签设href后，所有相对URL（如img、a、link、form）均以该href为基准解析，而非HTML文件位置；fetch、import、CSS的@import和background-image不受影响。
<base> 标签设了 href 后，所有相对路径（包括 <img src="logo.png">）都会以它为基准解析，不是当前 HTML 文件位置。这点不注意，图片八成会 404。
base href 会改写所有相对 URL 的解析逻辑
浏览器默认用当前 HTML 文件的 URL 做 base，比如 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/ 这层路径。
影响范围包括：
<a href="about.html"><img src="icon.svg"><link rel="stylesheet" href="main.css"><form action="submit.php">
但注意：fetch()、import()、CSS 里的 @import 和 background-image: url(...) 不受 <base> 影响 —— 它们走 JS 或 CSS 自己的解析规则。
立即学习“前端免费学习笔记（深入）”；
base 标签必须放在 head 里，且只能有一个
放错位置或重复声明，浏览器会忽略后续的 <base>，甚至部分旧版 Safari 会直接报错不渲染。常见翻车点：
- 动态插入
<base>（比如用 JS append 到<head>）—— 无效，必须是初始 HTML 解析时就存在 - 在
<body>里写<base>—— 大部分浏览器静默忽略 -
href值用了协议相对路径（//cdn.com/）或页面相对路径（./static/）—— 必须是绝对 URL 或根相对路径（/static/）
验证是否生效：打开 DevTools → Elements → 看 <head> 里有没有且仅有一个 <base href="...">>，再右键检查任意相对链接的“实际请求地址”是否符合预期。
base 和 data: URL 图片共存时互不干扰
<img src="data:image/png;base64,..."> 是完整的 URI，不是相对路径，所以完全绕过 <base> 规则。你即使写了 <base href="https://a.com/">，它照样解码显示。
但要注意混合使用时的维护成本：
- 同一页面既有
<base>又大量用data:，路径逻辑割裂，新人接手容易误判图片来源 - 如果本意是让所有资源走 CDN，结果漏掉几个
data:图片，缓存和压缩策略就失效了 -
data:图片无法被浏览器单独缓存，而<base>搭配外链图片反而能利用强缓存
调试图片 404 时优先查 base 是否意外覆盖了路径
当发现某几张图加载失败，但路径看起来没错，先做三件事：
- 在 Elements 面板中右键图片标签 → “Open in Sources panel”，看 DevTools 底部显示的“Request URL”是不是跑偏了（比如从
/img/变成了/assets/img/） - 临时删掉
<base>标签，刷新看图是否恢复 —— 如果恢复，问题就锁定在这里 - 检查构建工具（如 Webpack/Vite）是否自动注入了
<base>，比如 Vite 的base配置项会生成对应标签，但开发服务器和生产环境路径不一致时极易出错
最麻烦的情况是：base 设的是 /，而图片路径写成了 img/logo.png（没加斜杠），结果被解析成 https://site.com/img/logo.png —— 表面看着对，其实漏掉了子目录层级，上线后 404。
