Flutter cant load image from url - flutter

Question

════════ Exception caught by image resource service ════════════════════════════
The following ImageCodecException was thrown resolving an image codec:
Failed to load network image.
Image URL: https://cdn.sportmonks.com/images/soccer/leagues/5.png
Trying to load an image from another domain? Find answers at:
https://flutter.dev/docs/development/platform-integration/web-images
When i try the demo URL https://picsum.photos/250?image=9 it is working but the url above is good so what can be the problem?
class ListRow extends StatelessWidget {
final String name;
final imageUrl;
const ListRow({Key key, this.name, this.imageUrl}) : super(key: key);
#override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: 18,
height: 18,
child: Image(
image: NetworkImage(
'https://cdn.sportmonks.com/images/soccer/leagues/5.png'),
),
),
SizedBox(width: 10),
Flexible(
child: new Text(
name,
style:
new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
),
),
],
);
}
}

Answer 1

So flutter web has upgraded default rendered(HTML) -> CanvasKit and it has better performance.
You are most likely getting this error because CORS(can check chrome network tab to be sure).
To solve it could:
Update cors settings server side: https://stackoverflow.com/a/66104543/4679965
Run app with old rendered:
flutter run -d chrome --web-renderer html // to run the app
flutter build web --web-renderer html --release // to generate a production build
Or display images with platform view:
import 'dart:html';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
class MyImage extends StatelessWidget {
#override
Widget build(BuildContext context) {
String imageUrl = "image_url";
// https://github.com/flutter/flutter/issues/41563
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
imageUrl,
(int _) => ImageElement()..src = imageUrl,
);
return HtmlElementView(
viewType: imageUrl,
);
}
}

Answer 2

I get the same error, for a couple of weeks now, when trying to run an app from the master channel.
I got it working by forcing the web renderer to be HTML:
flutter run -d chrome --no-sound-null-safety --web-renderer=html
When you build your app for web you should:
flutter build web --no-sound-null-safety --web-renderer=html
By default the web renderer is auto, choosing the canvaskit web renderer on desktop browsers and html on mobile.
If you want to avoid this altogether you can stay on the beta or dev channels.

Answer 3

if it is working with another image then it should be a server-side error where the image is stored.

Answer 4

Could be an issue with the codec format. Try running the same code with another image url. If it is working, then the above error could be a technical glitch.
You could try this widget
https://pub.dev/packages/meet_network_image

Answer 5

You can just use this package https://pub.dev/packages/image_network
Using HTML renderer might break other things (like SVG rendering in my case)

Answer 6

Try not to define height, width for container and add fit:BoxFit.cover as a parameter of NetworkImage