<base>标签是统一管理HTML相对路径最直接的原生方案，须置于<head>最顶部、href为合法根相对路径（如/assets/）且仅影响HTML解析阶段的纯相对URL，对JS/CSS运行时路径无效。
用 <base> 统一解析所有相对路径
全局图片资源管理最直接的解法不是靠 JS 或构建工具，而是用 HTML 原生的 <base> 标签。它能强制所有相对路径（src、href、CSS 里的 url()）都从同一个根位置开始解析，避免每张图写一堆 ../。
必须满足三个条件才生效：<base> 要放在 <head> 最顶部；href 值必须是合法根相对路径（以 / 开头且结尾带 /）；只影响 HTML 解析阶段的纯相对 URL（比如 img/logo.png），不影响 fetch('./api') 或 CSS @import。
-
<base href="/assets/">→<img src="bg.jpg">解析为https://yoursite.com/assets/bg.jpg - 错写成
<base href="/assets">（缺末尾/）→ Firefox 会截断为/assetscss/，图片全挂 - 如果已用 Vite/Webpack 构建，检查是否已有自动注入的
<base href="/">，再手写一个会被静默丢弃
把图片集中放 static 目录并启用服务
对单页应用（SPA）或 Streamlit 类框架，<base> 只解决路径拼接，不解决服务器能否返回文件。此时必须确保后端/开发服务器明确支持静态资源路由。
通用做法是建一个 static 文件夹（与 index.html 同级），把所有图片、字体、图标放进去，再配服务器规则让 /static/xxx 指向该目录。Vite 默认开箱即用；Streamlit 需在 .streamlit/config.toml 中加 enableStaticServing = true；Nginx 则要配 location /static { alias /path/to/static; }。
立即学习“前端免费学习笔记（深入）”；
- 路径写法统一为
<img src="/static/bg.jpg">，不依赖 HTML 所在目录深度 - 避免用
./static/或../static/，这些在子路由页面里极易失效 - CDN 场景下，可把
<base href="https://cdn.example.com/assets/">直接指向 CDN 域名
CSS 变量 + background-image 管理装饰性背景图
图标、按钮 hover 图、全局背景这类非语义化图片，更适合抽成 CSS 变量统一维护，而不是塞进 HTML 的 <img> 标签里。
定义在 :root 里：:root { --hero-bg: url('/static/hero-bg.jpg'); }，然后在任意元素上用 background-image: var(--hero-bg)。注意两点：必须显式写 background-repeat: no-repeat（默认是平铺），且降级底色不能少——background-color: #f0f0f0 能防止加载失败时白屏。
- 换肤场景下，只需切换
:root里变量值，所有用到的地方自动更新 - 移动端要防 Safari 的背景缩放 bug，加
background-size: cover; background-position: center; - 大图务必提供
image-set()响应式源：background-image: image-set(url('bg-1x.jpg') 1x, url('bg-2x.jpg') 2x);
路径错误时快速定位的实操手段
图片不显示但控制台没报错？八成是路径问题。别靠猜，用这几招秒定位：
- 打开浏览器 Network 面板，筛选
Img，看请求是 404 还是 403，点开 Headers 查看 Request URL 是不是你预期的路径 - 本地开发时，在控制台运行：
Array.from(document.images).filter(i => i.naturalWidth === 0)，直接列出所有加载失败的<img> - 对 CSS 背景图，右键检查元素 → Computed → Background Image，看解析后的完整 URL 是什么
- 所有路径禁止含空格或中文；相对路径一律以 HTML 文件所在目录为基准，不是 CSS 文件位置
真正难的不是设路径，而是当项目有几十个 HTML 页面、嵌套三层路由、还要兼容部署子路径时，<base> 和 static 目录的组合能不能稳住所有边界情况——这时候少写一个 / 或多一个 .，就全盘崩。
