使用Edge调试Flutter应用首次运行抛ImageCodecException重启后恢复

异常信息 #

══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
The following ImageCodecException was thrown resolving an image codec:
Failed to load network image.
Image URL: https://i.ytimg.com/vi/eCx7dzYqb98/maxresdefault.jpg
Trying to load an image from another domain? Find answers at:
https://flutter.dev/docs/development/platform-integration/web-images
When the exception was thrown, this was the stack
Image provider: CachedNetworkImageProvider("https://i.ytimg.com/vi/eCx7dzYqb98/maxresdefault.jpg",
scale: 1)
 Image key: CachedNetworkImageProvider("https://i.ytimg.com/vi/eCx7dzYqb98/maxresdefault.jpg",
scale: 1):
  CachedNetworkImageProvider("https://i.ytimg.com/vi/eCx7dzYqb98/maxresdefault.jpg", scale: 1)
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: ImageCodecException: Failed to load network image.
Another exception was thrown: ImageCodecException: Failed to load network image.

异常原因分析 #

• 浏览器跨域校验延迟：Edge浏览器首次加载Flutter Web应用时，对跨域图片的CORS校验存在延迟，首次请求图片时校验未完成就尝试解码，导致抛出异常。重启后浏览器缓存了CORS校验结果，后续请求可正常加载；而移动端模拟器没有浏览器的跨域限制逻辑，因此无此问题。
• 初始化阶段资源加载竞争：首次启动Flutter Web应用时，应用初始化逻辑与图片加载请求存在资源竞争，图片请求在Flutter网络处理模块完全就绪前发起，导致加载失败。重启后应用初始化完成，资源加载流程稳定，图片即可正常加载。
• 缓存模块首次初始化问题：你使用的CachedNetworkImageProvider在首次启动时，本地缓存未建立，同时网络请求处理逻辑未完全初始化，导致图片加载失败。重启后缓存模块就绪或已缓存请求结果，加载恢复正常。

内容的提问来源于stack exchange，提问作者Kvu