ImageCodecException was thrown resolving an image codec

Question

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 ?

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?

Rae

SVGs are not supported by flutter. – Uintathere

In the 1.24.0-10.2.pre version It's work and I don't have any problem @ChristopherMoore – Rae

See my answer.. – Uintathere

Answer 1

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.

Uintathere

I remove Image.network and I use flutter_svg and svg is shown. But other browser can show svg in this way? @ChristopherMoore – Rae

@CyrustheGreat Could you rephrase that question? It wasn't quite clear. Are you asking if all browsers support this? – Uintathere

Yes@ChristopherMoore – Rae

@CyrustheGreat I can't say all, but I would guess most major desktop and mobile browsers. If flutter web is supported, this SVG is probably support assuming you're using only the CanvasKit renderer. – Uintathere

Answer 2

I have resolved this issue by seen this video "https://www.youtube.com/watch?v=U0Ez4CS6frc".

option 1: "flutter run -d chrome --web-renderer html"

option2: in the Andriod Studio application go to : Run -> Edit Configuration. in the Arguments type inputbox put this line "--web-renderer html"

[ here is the screen shot of option2 ] [1]: https://i.sstatic.net/ZDB8I.png

Partheniaparthenocarpy