### [base 标签改写相对路径：懒加载为何失效](https://www.huociguo.com/article/1868)

**Published:** 2026-10-04T03:22:48

**Author:** 米了

**Excerpt:** 🔗 页面加了 统一相对路径基准，图片懒加载却大面积失灵。根因在路径解析顺序。 在解析阶段就重写了所有相对路径的…

🔗 页面加了 `<base>` 统一相对路径基准，图片懒加载却大面积失灵。根因在路径解析顺序。

`base` 在解析阶段就重写了所有相对路径的 `src`、`data-src`、`srcset`，把它们拼到 base 指定的基准下。懒加载脚本读取 `data-src` 时，拿到的是已被重写的地址，与预期不符，加载逻辑直接断在这里。

![base URL 示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-1591059.jpeg)

base 一旦设定，相对路径全部重写

⚠️ 不受影响的情况：绝对路径（带协议或 //）与 dataURI，这两种 base 动不了。频繁混用 base 与相对 `data-src` 必然踩坑。

根因对策：懒加载资源统一用绝对 URL，或占位符改 dataURI；实在要用相对路径，就把 base 范围收窄、只对特定模块生效。其余资源仍走常规相对路径即可。

**Tags:** base 标签, data-src 失效, 懒加载路径, 相对路径重写, 绝对路径规避

**Categories:** HTML5

---