base标签会重写所有相对路径的src、data-src和srcset，导致懒加载失败；绝对路径和data uri不受影响，应避免base与相对data-src混用，推荐使用绝对url或data uri占位符。
base标签会改写所有相对路径的图片请求地址，包括data-src和src
如果你在 HTML 中用了 <base href="https://cdn.example.com/">，那所有没带协议和域名的 src、data-src 值都会被浏览器自动补上前缀。这不是懒加载特有行为，但对懒加载影响特别大——因为很多人依赖 data-src 存真实路径，却忘了它也是相对路径。
常见错误现象：<img src="placeholder.jpg" loading="lazy"> 在设置了 <base href="https://cdn.example.com/"> 后，data-src 实际会被解析为 https://cdn.example.com/images/photo.jpg。如果 CDN 上根本没有这个路径，图片就永远加载失败。
- 检查最终渲染的 DOM：右键“查看页面源代码”看到的是原始 HTML，要打开 DevTools → Elements 面板，看实际
data-src属性值是否已被 base 重写 -
src和data-src都受 base 影响，但srcset中的每个 URL 同样会被重写（Chrome/Firefox 行为一致） - 绝对路径（含
http://、https://、//）和 data URI（如data:image/gif;base64,...）不受 base 影响 - 服务端渲染时若动态注入 base，需确保所有
data-src路径已提前适配，否则断网时 fallback 会直接 404
loading="lazy" 失效的隐藏原因：base 导致图片被误判为“跨域”或“不可访问”
当 base 指向一个 CDN 域名，而 data-src 是相对路径时，浏览器在 IntersectionObserver 触发前就尝试预检该 URL。如果 CDN 返回 404 或 CORS 头缺失，部分 Android WebView 会静默跳过这张图，既不加载也不报错，表现为“滚动到位置却没出现图片”。
这不是 IntersectionObserver 的 bug，而是浏览器加载器在资源调度阶段就放弃了请求。你查 Network 面板，可能根本看不到对应请求，只看到控制台有一条被忽略的 warning（Chrome 有时不显示）。
- 验证方式：临时删掉
<base>标签，用绝对路径写死data-src，再滚动测试是否恢复加载 - 避免用 base + 相对
data-src组合；更稳妥的是让后端模板直接输出完整 URL，或 JS 初始化时用new URL(img.dataset.src, document.baseURI)显式解析 - 如果必须用 base，所有
data-src应统一为根路径开头（如/assets/photo.jpg），并确保 CDN 正确映射
Vue/React 中 base 标签与框架路径处理的冲突
前端路由（如 Vue Router 的 history 模式）常配合 <base href="/app/">，此时 会被解析成 https://site.com/app/photo.jpg —— 而真实图片可能在 /static/ 下。这种路径错位在 SSR 场景下尤其致命：服务端生成的 HTML 已按 base 解析好，客户端 JS 却无法修正。
- Vue 2/3 和 React 都不会自动重写
data-src，但浏览器会——框架只管属性值，不管 base 如何干预最终 URL - SSR 渲染时，如果 base 是动态注入（比如通过 context 注入），需同步把
data-src构造成相对于该 base 的合法路径，不能依赖客户端补全 - 更安全的做法是：禁用 base 标签，改用构建工具（如 Webpack/Vite 的 public 目录或 asset 静态托管）统一管理静态资源路径
为什么 src="" + base 标签会让懒加载彻底失效
src="" 本身就会触发对 base URL 的无效请求（如 GET https://cdn.example.com/），而 loading="lazy" 不会阻止这个行为。结果就是：首屏还没滚动，浏览器已为每个空 src 发起一次 CDN 根路径请求，挤占并发连接数，真实图片反而排队等待。
- 不要用
src=""当占位符；换成src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="，它不受 base 影响，且无网络请求 - 如果必须用 base，所有
src值都应为绝对路径或 data URI，避免空值或相对路径 - 检查构建产物中是否存在
<base>与大量data-src混用的情况——这是上线后白屏率突然升高的高频原因
base 标签本身很轻量，但它像一把全局开关，无声地重写了整个页面的资源寻址逻辑。懒加载是否生效，很多时候不取决于 JS 写得多漂亮，而取决于 base 和 data-src 这两个字符串在 HTML 源码里怎么拼在一起。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
