base标签缺失本身不会导致图片不显示，但错误使用会令所有相对路径（如img src）解析失效；其核心问题是base与相对路径的隐式耦合被忽略。
base 标签缺失本身不会导致图片不显示——但一旦你用了 <base> 却写错、漏写或滥用，反而会让所有相对路径（包括 img 的 src）集体失效。真正出问题的，是 base 标签和相对路径之间的隐式耦合被忽略。
为什么加了 <base> 后图片突然 404？
浏览器解析 <img src="images/logo.png"> 时，会先看有没有 <base href="...">。如果有，就用它作为所有相对 URL 的“起点”，而不是当前 HTML 文件位置。
常见翻车点：
-
<base href="/static/">写在根目录 HTML 里，结果src="images/logo.png"被拼成https://example.com/static/images/logo.png—— 但实际图片在/images/下 -
<base href="https://cdn.example.com/">没加结尾斜杠，浏览器会截断最后一段路径，把src="logo.png"解析成https://cdn.example.com/logo.png（看似对），但若 base 是https://cdn.example.com/assets（缺 /），就会变成https://cdn.example.com/logo.png（丢掉 assets） - 多环境部署时，开发用
<base href="/>，生产却忘了同步改，或反过来
如何快速判断是不是 <base> 搞的鬼？
打开开发者工具 → Network 面板 → 刷新 → 找图片请求 → 点开 → 看「Headers」里的 Request URL。如果这个 URL 明显偏离你预期的路径（比如多了一级前缀、域名变了、路径被截断），基本就是 <base> 在起作用。
立即学习“前端免费学习笔记（深入）”；
再确认一下：<base> 必须写在 <head> 里，且一个页面只能有一个；重复声明后者会覆盖前者。
实操建议：
- 用 JavaScript 临时打印真实解析结果：
console.log(new URL('images/logo.png', document.baseURI).href) - 检查
document.baseURI是否等于你预期的基准地址；不是？说明<base>缺失、写错，或被 JS 动态修改过 - 本地调试时，直接删掉
<base>标签试一试——如果图片立刻显示，问题就锁定在这里
不依赖 <base> 的更稳方案
多数项目其实不需要 <base>。它主要适合单页应用（SPA）路由或强 CDN 分离场景。普通静态站，优先用明确路径：
- 根路径开头的相对路径：
src="/images/logo.png"（从域名根开始，不依赖 base） - 绝对 URL：
src="https://cdn.example.com/logo.png"（彻底绕过解析逻辑） - 构建时注入：用 Webpack/Vite 的
public目录 +%PUBLIC_URL%或import.meta.env.BASE_URL，编译后生成确定路径，不靠运行时 base
如果必须用 <base>，请确保：
- href 值以
/结尾（/static/✅，/static❌） - 所有资源路径都按该 base 重新校验，别混用“当前文件相对”写法
- 服务端渲染（SSR）时，base href 要和服务端上下文一致，不能只靠客户端 JS 注入
最常被忽略的一点：base 标签影响的不只是 img，还有 a、link、script、form action……一旦出问题，往往是一串资源全挂，别只盯着图片查。
