微模块中srcset降级失效，因子应用独立构建部署导致路径前缀、CDN变更、样式隔离、onerror不统一及CORS/Shadow DOM/沙箱API劫持等兼容性问题；需通过自定义元素或构建插件统一接管加载逻辑。

微模块（Micro-frontend）中各子应用独立构建、独立部署，srcset 降级策略无法靠全局 HTML 层统一控制——必须在运行时由主应用或共享 SDK 主动接管图片加载逻辑，否则每个子应用写的 srcset 都是孤立的，失败后各自 onerror，兜底不一致、监控不可见、CDN 切换难落地。

为什么直接写 srcset + sizes 在微模块里会失效

子应用 A 渲染 ，子应用 B 写法不同、路径前缀不同（如 /b/）、甚至用 WebP 路径但没配 。主应用无法静态重写这些标签，且浏览器预加载器在 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 并注入统一加载器

主应用注册一个轻量 自定义元素，在子应用中替换原生 （可通过构建时插件或运行时 DOM 代理），所有图片加载行为收口到主应用逻辑中。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 子应用只需写 ，不写 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 模板，自动为每个 注入标准化属性。

• 插件匹配 ，提取原始 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 封装了 ，事件无法冒泡；以及 sizes 中媒体查询依赖 window.matchMedia，但某些子应用沙箱（如 qiankun）会劫持该 API 返回固定值。这些都不会报 JS 错，只会让降级链在某一层无声断裂。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！