Search code examples
flutterflutter-web

ImageCodecException was thrown resolving an image codec

I am using 1.27.0-4.0.pre sdk version to my flutter pwa. Before upgrading I used 1.24.0-10.2.pre sdk version. in 1.24.0-10.2.pre version everything was good and I don't have any problem is showing svg image with Image.network. But now When I launch my pwa None of my Image is shown ?

enter image description here

This read squarer appear instead of image . And I get this error on console:

══╡ 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)

When I open http://localhost:33033/assets/svgs/splash.svg on chrome, this image exist and is loaded. What is a problem?

Solution

  • SVGs are not supported by Flutter by default. If it worked in the past, you were likely using the HTML web renderer where you can get away with using SVG a little bit, but it's not made to do that so there are issues with it.

    I see that you're now using the CanvasKit renderer, which likely treats images differently than the HTML renderer and removes any possibility of using SVGs.

    You can use the flutter_svg package and use only the CanvasKit renderer to possibly reliably use SVGs.