HTML中base标签引起的图片无法显示问题排查-html教程-PHP中文网

base href写成相对路径会静默失效，浏览器直接丢弃不报错；合法值仅限绝对url（如https://example.com/）或根相对路径（如/subapp/），结尾必须带斜杠，否则导致批量404。

html中base标签引起的图片无法显示问题排查

base href写成相对路径会静默失效

浏览器根本不认 <base href="assets/"> 这种写法，直接丢弃，不报错也不警告。所有 src、href 的相对路径仍按当前页面 URL 解析，结果就是一堆 404。这不是 bug，是 HTML 规范强制要求：合法值只有两种——绝对 URL（如 https://example.com/subapp/，结尾必须带 /）或根相对路径（如 /subapp/，开头和结尾都必须是 /）。

常见翻车写法：

<base href="subapp/"> → 无效，被丢弃
<base href="../static/"> → 含 ..，规范禁止，丢弃
<base href="/subapp"> → 缺末尾 /，Firefox/Opera 会把 css/app.css 拼成 /subappcss/app.css
<base href="%24%7BPUBLIC_PATH%7D"> → 构建未替换，浏览器收到字面量字符串，照样失效

哪些资源真受base影响，哪些完全不受控

<base> 只在 HTML 解析阶段起作用，只改写“纯相对路径”（既无协议、也无 / 开头）的硬编码属性。它不是运行时重写器，更不干预 JS 或 CSS 的模块系统。

✅ 真生效：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

<img src="logo.png">
<script src="app.js"></script>
<link href="style.css">
<form action="submit.php"></form>
CSS 文件里的 background: url(icon.svg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve）

❌ 完全不受控：

fetch('./api/user')
import('./utils.js')
new Worker('./worker.js')
@import "reset.css"
<iframe src="/admin/frame.html"></iframe>（带 / 开头，已是根路径）
<img srcset="logo-2x.png 2x">（srcset 不走 <base>）

SPA 部署子路径时 base 和框架路由配置必须严格对齐

Vue Router 的 createWebHistory('/subpath/') 和 HTML 的 <base href="/subpath/"> 是两套独立机制，互不同步。只配一个，另一个大概率出问题。

没配 <base href="/subpath/"> → chunk-xxx.js 加载 404（资源路径错）
只配 <base href="/subpath/">，没设 Vue Router 的 base → router.push('/home') 跳到根路径，白屏
Webpack 的 publicPath 和 <base href="/subpath/"> 同时配置且值相同 → 资源路径被拼两次，变成 /subpath//subpath/js/app.js
Vite 已设 base: '/subpath/'，HTML 中再手动加 <base> → 重复生效，风险叠加

动态插入 base 或位置错误毫无提示但无效

<base> 必须是初始 HTML 解析时就存在，否则无效。

用 JS 动态 append 到 → 无效
写在里 → 大部分浏览器静默忽略
href 值用了协议相对路径（//cdn.com/）或页面相对路径（./static/）→ 必须是绝对 URL 或根相对路径（/static/）
重复声明多个 <base> → 浏览器只取第一个，其余忽略，无任何提示