Flutter cant load image from url

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),
          ),
        ),
      ],
    );
  }
}

it isn't work on chrome but work on the android emulator – mr_robot Jan 25 '21 at 00:19 — mr_robot, Jan 25 '21 at 00:19

score 25 · Answer 1 · answered Apr 26 '21 at 16:16

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,
    );
  }
}

Thanks for the answer, particularly for the number 3. In case anyone gets "Set style.height to any appropriate value to stop this message.", warning message then the solution is: ```(int _) => ImageElement() ..src = imageUrl ..style.width = '100%' ..style.height = '100%',``` — Hesam, Oct 29 '21 at 15:55

score 16 · Answer 2 · edited Jan 25 '21 at 10:38

16

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.

edited Jan 25 '21 at 10:38

Dharman

30,962
25
85
135

answered Jan 25 '21 at 10:33

Constantin

601
5
14

i changed to dev and tried to run with that but it failed, for now I'm working with the emulator but i hope it will be fixed because i want web too. – mr_robot Jan 27 '21 at 10:44
Use the **--web-renderer** argument and it should work. – Constantin Jan 27 '21 at 13:57
it is working, there is a way to do that with debug? – mr_robot Jan 28 '21 at 11:11
Flutter runs by default in debug mode. The command **flutter run -d chrome --web-renderer=html** should be running your app into the Chrome web browser in debug mode. – Constantin Jan 28 '21 at 19:25
You can find here https://flutter.dev/docs/development/platform-integration/web-images the explanation of why it won't work without the **html** web renderer. You also have other solutions there. – Constantin Feb 10 '21 at 07:58

score 1 · Answer 3 · answered Jan 24 '21 at 22:12

1

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

answered Jan 24 '21 at 22:12

Khawaja Furqan

90
4

But you can enter the URL and the image is shown so how it is server-side error? – mr_robot Jan 24 '21 at 23:16
its not your fault – Khawaja Furqan Jan 25 '21 at 09:08

score 0 · Answer 4 · answered Jan 24 '21 at 17:07

0

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

answered Jan 24 '21 at 17:07

jeugene

211
1
3

With another image URL it is working, what you mean by technical glitch. – mr_robot Jan 24 '21 at 17:24

score 0 · Answer 5 · answered Mar 30 '23 at 08:06

In my case I was trying to load images from my Firebase storage in Flutter and got this issue because CORS (Cross-Origin Resource Sharing) hadn't been set up on my Firebase storage. I followed the steps in outlined in this guide to set CORS for my firebase storage and it resolved my problem. I'm sure there are similar guides on how to set it up on whatever file hosting platform you might be using for your images.

score 0 · Answer 6 · answered Jun 29 '23 at 13:00

As some answers suggested this issue is because of the canvas renderer.

You can follow this link to get the script you can add instead of running the renderer command for building/testing.

It worked for me!

https://phongyewtong.medium.com/flutter-web-image-network-not-loading-but-url-is-correct-e1dd3cd0d79f

score -1 · Answer 7 · answered Jan 24 '21 at 16:40

-1

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

answered Jan 24 '21 at 16:40

ygzkrmtc

177
12

Your solution won't work and the reason + a couple of solutions that work, including the one that I gave, can be found here: https://flutter.dev/docs/development/platform-integration/web-images – Constantin Feb 10 '21 at 07:55

score -1 · Answer 8 · answered Aug 09 '22 at 20:18

-1

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)

answered Aug 09 '22 at 20:18

theSharpestTool

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/32448578) – Arash Ghazi Aug 16 '22 at 18:56

Flutter cant load image from url

8 Answers8

Linked