Flutter Web图片无法加载：[object ProgressEvent]报错求助

报错信息 #

Error: [object ProgressEvent]
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 327:10  createErrorWithStack
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 337:28            _throw
dart-sdk/lib/core/errors.dart 120:5                                           throwWithStackTrace
dart-sdk/lib/async/zone.dart 1386:11                                          callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                              _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                               _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:15           <fn>

这个报错通常和图片资源的网络访问、跨域限制或Flutter Web渲染配置有关，以下是具体解决步骤：

• 检查图片资源的可访问性与跨域设置

  1. 直接把图片URL复制到浏览器地址栏，确认能正常打开。如果打不开，先修复资源路径或服务器问题。
  2. 若图片来自第三方域名，确保服务器配置了CORS响应头（比如Access-Control-Allow-Origin: *），否则浏览器会拦截跨域资源请求。
  3. 本地静态资源的话，检查pubspec.yaml里的assets配置是否正确，执行flutter pub get同步资源。

• 切换Flutter Web渲染器
  在web/index.html的<head>标签里添加以下脚本，切换渲染器尝试解决：

  <script>
    window.flutterWebRenderer = 'html'; // 也可以尝试'canvaskit'
  </script>
  

  两种渲染器对图片的处理逻辑不同，html渲染器在处理某些格式或跨域图片时兼容性更好。

• 添加异常捕获避免全局报错
  使用Image.network时配置errorBuilder，既可以显示自定义占位符，也能阻止报错扩散：

  Image.network(
    '你的图片URL',
    errorBuilder: (context, error, stackTrace) {
      return const Icon(Icons.broken_image, color: Colors.grey);
    },
  )
  

  也可以用try-catch包裹图片加载的异步代码，打印具体错误信息定位问题。

• 清理缓存并重建项目
  执行以下命令清理缓存后重新构建：

  flutter clean
  flutter pub get
  flutter build web
  

  测试时用浏览器无痕模式，避免缓存干扰。

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