CODEWITHSUNDEEP
flutter
mr_robot
mr_robot

Reputation: 547

Flutter cant load image from url

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

Upvotes: 20

Views: 34643

Answers (9)

Sarotobi
Sarotobi

Reputation: 831

If you're having trouble on flutter web place this on the html head and then clear your browser cache

  <script type="text/javascript">
    window.flutterWebRenderer = "html";
  </script>

Upvotes: 1

Clevino Alrin
Clevino Alrin

Reputation: 353

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

Upvotes: 0

CVStrydom
CVStrydom

Reputation: 301

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.

Upvotes: 1

theSharpestTool
theSharpestTool

Reputation: 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)

Upvotes: -1

Adelina
Adelina

Reputation: 11931

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:

  1. Update cors settings server side: https://stackoverflow.com/a/66104543/4679965

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

Upvotes: 31

Constantin
Constantin

Reputation: 611

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.

Upvotes: 17

Khawaja Furqan
Khawaja Furqan

Reputation: 100

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

Upvotes: 1

jeugene
jeugene

Reputation: 231

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

Upvotes: 0

ygzkrmtc
ygzkrmtc

Reputation: 187

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

Upvotes: 0

Related Questions