微模块中srcset降级失效，因子应用独立构建部署导致路径前缀、CDN变更、样式隔离、onerror不统一及CORS/Shadow DOM/沙箱API劫持等兼容性问题；需通过自定义元素或构建插件统一接管加载逻辑。
微模块（Micro-frontend）中各子应用独立构建、独立部署，srcset 降级策略无法靠全局 HTML 层统一控制——必须在运行时由主应用或共享 SDK 主动接管图片加载逻辑，否则每个子应用写的 srcset 都是孤立的，失败后各自 onerror，兜底不一致、监控不可见、CDN 切换难落地。
为什么直接写 srcset + sizes 在微模块里会失效
子应用 A 渲染 <img src="/a.jpg" srcset="/a-400w.jpg 400w, /a-800w.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="HTML怎么在前端微模块架构中统一srcset的降级策略" >，子应用 B 写法不同、路径前缀不同（如 /b/）、甚至用 WebP 路径但没配 <picture></picture>。主应用无法静态重写这些标签，且浏览器预加载器在 DOM 解析阶段就已决策资源地址，JS 注入太晚。
- 子应用构建产物中
srcset的路径是相对或带环境前缀的，主应用上线后 CDN 域名变更，旧路径全部 404，但子应用自身无感知 -
sizes依赖 CSS 计算渲染宽度，而微模块样式隔离（Shadow DOM 或 scoped CSS）可能导致计算结果偏差，浏览器选错图 - 各子应用 onerror 写法五花八门：
this.src="/fallback.png"、this.onerror=null; this.src=window.FALLBACK_URL、甚至空实现，主应用无法统一埋点或重试
用自定义元素封装 img 并注入统一加载器
主应用注册一个轻量 <mf-img></mf-img> 自定义元素，在子应用中替换原生 <img alt="HTML怎么在前端微模块架构中统一srcset的降级策略" >（可通过构建时插件或运行时 DOM 代理），所有图片加载行为收口到主应用逻辑中。
- 子应用只需写
<mf-img data-srcset="/photo-400w.jpg 400w, /photo-800w.jpg 800w" data-sizes="(max-width: 768px) 100vw" data-alt="描述"></mf-img>，不写src，避免预加载干扰 - 主应用的
mf-img实现内使用Promsie.race([fetch(url, {signal}), timeout])主动探测候选 URL 是否可访问，而非等error事件——弱网下 timeout 比 error 更早触发 - 探测失败后按预设 fallback 链降级：CDN 备节点 → 同域低质图 → base64 占位 SVG → 最终显示
data-alt文本（用::before渲染，不破坏布局） - 所有请求自动携带
X-MF-Module: app-a请求头，便于 CDN 或边缘网关识别来源并做差异化限流或缓存策略
构建时插件统一注入 data-src 和 fallback 元数据
若无法改造子应用运行时（如遗留 Angular 子应用不支持自定义元素），可在主应用构建流程中，用 Vite 插件扫描 HTML 模板，自动为每个 <img alt="HTML怎么在前端微模块架构中统一srcset的降级策略" > 注入标准化属性。
立即学习“前端免费学习笔记（深入）”；
- 插件匹配
<img src=".*?" alt="HTML怎么在前端微模块架构中统一srcset的降级策略" >，提取原始src，改写为，并添加data-fallback="/static/fallback-320w.jpg" - 保留原
srcset和sizes，但强制设置src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="（1px GIF），确保浏览器始终有可用src，不白屏 - 主应用初始化时遍历所有
img[data-src]，调用统一加载函数；该函数优先 decode() 当前设备最匹配的srcset项，超时则切data-fallback - 注意：插件必须处理
src中含查询参数的情况（如?v=1.2.3），避免误判为无效路径
最容易被忽略的兼容性断点
微模块场景下，srcset 降级不是“写了就生效”，真正卡住的是三处：子应用未声明 crossorigin 导致 decode() 报 CORS 错误却静默失败；主应用监听 error 事件时，子应用用 ShadowRoot 封装了 <img alt="HTML怎么在前端微模块架构中统一srcset的降级策略" >，事件无法冒泡；以及 sizes 中媒体查询依赖 window.matchMedia，但某些子应用沙箱（如 qiankun）会劫持该 API 返回固定值。这些都不会报 JS 错，只会让降级链在某一层无声断裂。
