解析图像编解码器时抛出 ImageCodecException

Question

我正在使用1.27.0-4.0.presdk 版本来处理我的 flutter pwa。在升级之前，我使用了1.24.0-10.2.presdk 版本。在 1.24.0-10.2.pre 版本中，一切都很好，我没有任何问题用Image.network. 但是现在当我启动我的 pwa 时没有显示我的图像？

这个读取平方器出现而不是 image 。我在控制台上收到此错误：

??? EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ?????????????????????????????????????????????????????
The following ImageCodecException was thrown resolving an image codec:
Failed to decode image data.
Image source: http://localhost:33033/assets/svgs/splash.svg

When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49      throw_
lib/_engine/engine/canvaskit/image.dart 102:7                                     createDefault
lib/_engine/engine/canvaskit/skia_object_cache.dart 141:41                        new
lib/_engine/engine/canvaskit/image.dart 92:3                                      decodeFromBytes
lib/_engine/engine/canvaskit/image.dart 75:53                                     <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 324:14  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 329:39  dcall
dart-sdk/lib/html/dart2js/html_dart2js.dart 37283:58                              <fn>
dart-sdk/lib/async/zone.dart 1370:13                                              _rootRunUnary
dart-sdk/lib/async/zone.dart 1265:19                                              runUnary
dart-sdk/lib/async/zone.dart 1170:7                                               runUnaryGuarded
dart-sdk/lib/async/zone.dart 1207:26                                              <fn>

Image provider: NetworkImage("assets/svgs/splash.svg", scale: 1)
Image key: NetworkImage("assets/svgs/splash.svg", scale: 1)

当我http://localhost:33033/assets/svgs/splash.svg在 chrome 上打开时，此图像存在并已加载。什么是问题？

Answer 1

Flutter 默认不支持SVG 。如果它在过去有效，您可能会使用 HTML Web 渲染器，在其中您可以稍微使用 SVG，但它不是这样做的，因此存在问题。

我发现您现在正在使用 CanvasKit 渲染器，它处理图像的方式可能与 HTML 渲染器不同，并且消除了使用 SVG 的任何可能性。

您可以使用该flutter_svg包并仅使用CanvasKit 渲染器才能可靠地使用 SVG。