火次果
火次果

暂无菜单项

首页/文章/技术文章/web前端/HTML5/
打开 MD 链接

base 标签改写相对路径:懒加载为何失效

发布于 1天前
3

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

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

base URL 示意
base 一旦设定,相对路径全部重写

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

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

常见问题(FAQ)

base 影响哪些属性
src、href、data-src、srcset 等相对路径属性,在解析阶段即被重写。
绝对路径会被改吗
不会。带协议或 // 的绝对路径与 dataURI 不受 base 影响。
懒加载为何断
data-src 被重写成意外地址,脚本按原逻辑读取失败,懒加载中断。
怎么规避
懒加载资源用绝对 URL 或 dataURI 占位,避免相对 data-src 被改写。
base 能只管部分模块吗
可以。缩小 base 作用范围,只对需要统一基准的模块使用。
base 标签data-src 失效懒加载路径相对路径重写绝对路径规避
支持作者
如果这篇内容对你有帮助,可以请作者喝杯咖啡
0 点赞
0 收藏
分享
0 讨论
反馈
0 / 600
细中粗
0 讨论
热门最新
总结
暂无总结
嗨,下午好!
所有的成功,都源自一个勇敢的开始
创作
社区
购物
会员
近期热门

暂无数据

火次果
火次果
首页
资迅中心
小店
AI导航
社区
所有的成功,都源自一个勇敢的开始
不辜负每一个勇敢的开始
关于FAQ协议
火次果 © 2026鲁ICP备2025164830号-1