<base>仅在HTML解析阶段改写纯相对路径（如logo.png）的解析起点，必须为绝对URL或根相对路径（以/开头且结尾带/），否则静默失效；不影响fetch、import等运行时行为。
<base> 会改写所有 HTML 中纯相对路径的解析逻辑，而懒加载用的 data-src 不是 src，所以它本身不受影响——但一旦你把 data-src 的值赋给 src，那一刻就正式进入 <base> 的管辖范围了。
base href 会让 data-src 赋值后的图片请求跑偏
很多人以为 data-src 是“自定义属性”，只要不写进 src 就安全。错。真正触发网络请求的是 src 被赋值的瞬间，此时浏览器按当前 document.baseURI 解析该值。
- 如果
<base href="/assets/">存在，且你执行img.src = img.dataset.src，而，那最终请求的是/assets/img/logo.png，不是你本地开发时预期的/img/logo.png - 尤其在构建工具（如 Vite）已设
base: "/myapp/"的情况下，再手动加<base href="/myapp/">，可能导致路径被拼两次（/myapp//myapp/img/logo.png） - 验证方法：在 DevTools → Elements 面板右键图片 → “Open in Sources panel”，看底部显示的 Request URL 是否符合你写在
data-src里的原始路径
loading="lazy" 和 base 共存时更隐蔽
原生 loading="lazy" 不走 JS，也不碰 data-src，它直接监听 src。所以如果你写了：
<img src="logo.png" loading="lazy" >
——那浏览器立刻按 <base> 解析 src="logo.png"，首屏就可能 404；而 data-src 完全没机会被用上。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 不要混用：
loading="lazy"和data-src同时存在，容易引发并发加载或覆盖（比如 JS 刚赋完src，浏览器又自己触发一次） - 若必须用
<base>，懒加载应统一走 JS +data-src，且确保data-src值本身已是完整路径（如/img/logo.png或https://cdn.com/logo.png），绕过 base 干预 -
srcset和sizes同理：赋值前检查data-srcset是否含协议或根路径，否则也会被 base 改写
IntersectionObserver 回调里赋 src 前必须做路径归一化
JS 动态赋值时，最容易忽略的是：你拿到的 dataset.src 可能是相对路径，而当前页面是否带 <base> 是运行时才知道的。不能假设它一定按 HTML 文件位置解析。
- 安全做法：用
new URL(el.dataset.src, document.baseURI).href显式计算目标地址，再赋给src - 例如：
el.dataset.src = "icon.svg"，document.baseURI是https://example.com/assets/，则结果是https://example.com/assets/icon.svg - 避免用字符串拼接或正则替换，
URL构造器能正确处理../、./、协议相对路径等边界情况 - 注意：Safari 对空
srcset敏感，赋值前先清空再设，别留srcset=""
最常被跳过的细节是：<base> 生效与否，不取决于你有没有写它，而取决于它是否在初始 HTML 中、是否格式合法、是否唯一。动态插入、路径写成 ./static/、或者和构建工具的 publicPath 冲突，都会让图片在懒加载那一刻突然找不到家。
