广告图的 src 必须指向高可用占位图（如 1×1 GIF 或内联 SVG），禁止为空、动态拼接或依赖 JS；需用 <picture> 实现格式降级，<img> 的 src 为唯一兜底入口，且必须独立可访问、宽高比一致；预加载 WebP 并运行时检测，失败再加载 JPG；onerror 需内联防死循环；alt 必须语义准确且显式声明。
src 必须指向一个真实可加载的资源，否则广告图在断网、JS 失败或旧浏览器下直接白屏——这不是“没加载完”，而是根本没触发加载逻辑。
广告图的 src 不能空、不能动态拼接、不能依赖 JS 注入
广告位常被误写成 <img src="" >，这在 Safari 或禁用 JS 的场景下就是空白容器。浏览器不支持 loading="lazy" 或忽略 data-src 时，只认 src；而 src="" 不会发起任何请求。
-
src应始终指向高可用占位图：推荐 CDN 托管的 1×1 GIF（如/i/px.gif）或内联 SVG（data:image/svg+xml;base64,...），确保 HTTP 200 响应 - 禁止用
src="./ads/xxx.jpg"：本地路径在嵌套路由或微前端中极易 404；也禁用带 query 参数的动态地址（如src="/api/ad?slot=home"），服务端不可靠时连 fallback 都没了 - SSR 渲染阶段必须把
src值直接写出，不能等客户端 JS 补全——否则断网首屏就无图
用 <picture> 实现格式降级，但 <img> 的 src 是唯一兜底入口
广告图需兼容 WebP/AVIF，但不能只靠 <img src="x.webp">。Safari ≤13.1、旧 Android WebView 根本不识别 image/webp MIME 类型，连请求都不发，直接留白。
-
<source>必须按支持强度从强到弱排列：type="image/avif"→type="image/webp"→ 最后是<img src="fallback.jpg" alt="广告位"> -
<img>的src必须独立可访问：不能是相对路径错误的地址，也不能依赖 CORS 或登录态；它不是“备用”，而是最终渲染载体 - 所有
srcset中的图片宽高比必须一致，否则广告尺寸跳变影响点击热区
预加载 + 运行时检测，避免 fallback 图浪费带宽
WebP 支持率已超 95%，但硬性 fallback（如全部加载 JPG）会显著增加流量。更优策略是：先预加载 WebP，运行时检测是否可用，失败再加载 JPG。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 在
<head>中声明：<link rel="preload" as="image" href="/ads/main.webp"> - 页面加载后立即检测：
document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') > -1 - 检测通过则用
new Image()加载 WebP 并监听onload；失败则动态创建<img src="/ads/main.jpg">插入 DOM - 不要提前
preloadJPG fallback——它只在降级路径中按需加载
onerror 必须内联且防死循环，但仅处理网络层失败
onerror 不会捕获空 src、CORS 拦截、或服务器返回 200 占位图的情况。它只对「请求发出后返回非 2xx」或网络中断有效。
- 正确写法：
onerror="this.src='/ads/fallback.jpg'; this.onerror=null;"—— 立即切断事件链，防止循环 - 更稳妥写法：
onerror="if (!this.src.includes('fallback')) this.src='/ads/fallback.jpg'; this.onerror=null;" - 若连 fallback 图都不可信，直接用 base64 内联：
onerror="this.src='data:image/png;base64,iVBORw...'; this.onerror=null;" - 注意：
onerror绑定必须在appendChild()前完成；动态创建的img元素，事件绑定晚于src赋值将无法捕获首次错误
最容易被忽略的是：广告图的 alt 必须显式声明且语义准确。不是“广告图”，而是“限时折扣广告，点击跳转活动页”——它在图片失效、屏幕阅读器、SEO 和纯文本邮件中都起作用。一旦 <img> 的 src 可加载（哪怕只是 1px GIF），alt 就能正常生效；反之，src 为空或非法，alt 直接被浏览器忽略。
