Flutter如何从URL加载动图GIF 出现ImageCodecException异常怎么解决

场景1：运行在Flutter Web平台 #

该报错是Web端跨域资源访问限制导致，两种解决方式：

• 调试阶段可修改运行配置，在Additional arguments栏添加参数：--web-browser-flag "--disable-web-security"，临时禁用浏览器安全限制
• 生产环境需要让图片资源的服务端配置CORS响应头，放行你的Web应用域名的访问请求

场景2：运行在Android/iOS原生平台 #

• 先检查网络权限配置：
  Android端需要在android/app/src/main/AndroidManifest.xml中添加网络权限声明：

  <uses-permission android:name="android.permission.INTERNET" />
  

  iOS端如果是iOS9及以上版本，需要在ios/Runner/Info.plist中配置ATS规则，允许网络请求：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

• 可替换为更稳定的第三方图片加载库cached_network_image实现加载：
  第一步在pubspec.yaml中添加依赖：

  dependencies:
    cached_network_image: ^3.2.3
  

  第二步替换原有图片加载代码：

  CachedNetworkImage(
    imageUrl: 'https://flutter-examples.com/wp-content/uploads/2021/01/happy_mothers_Day.gif',
    width: 300,
    height: 400,
    fit: BoxFit.contain,
    placeholder: (context, url) => const CircularProgressIndicator(),
    errorWidget: (context, url, error) => const Icon(Icons.error),
  )
  

额外验证步骤 #

可以先在本地浏览器直接打开你使用的GIF链接，确认链接本身可正常访问，如果返回403/404，说明该资源存在防盗链限制或者已经失效，需要更换可公开访问的GIF资源。

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