Development flutter mobile app development
failed to load network image

Failed to load network image – Flutter Web

Failed to load network image ” – If you are working with flutter web then you must have encountered this error at some time. As we all know, since flutter 2.0 – web support is available in the stable channel of flutter. So, in this article, we will resolve this error using the stable channel.

failed to load network image
Failed to load network image in the flutter web

You can see my current flutter configuration in below image –

failed to load network image flutter doctor
failed to load network image flutter doctor

Guys, actually if we talk about flutter web, when we run any application in flutter web it renders the content on device with the help of rendrers. For running web applications in flutter, it has two web rendrers –

  1. HTML Renderer
  2. Canvas KIT Renderer

Before going to resolve this error, i want to give you guys a small overview of these rendrers.

HTML Renderer – Flutter uses this rendrer as a default redrer when you run your application on mobile browsers.

Canvas KIT Renderer – Flutter uses this rendrer as a default renderer when you run your application on desktop browsers.

To learn more about web renderers please follow this link.

Why this error – Failed to load network image ?

Now finally you should be excited to know why this error came when flutter web is already using a web rendrer by default to parse the content.

So here is a simple reason for that –

HTML renderer can load cross-origin images ( images that you are loading from the internet ) by default. This means you do not have to make any setup or changes to load the images but this is not the case with canvas kit renderer.

Solution-

Simple solution is to run the code using HTML renderer. You can run the below command to do that.

flutter run -d chrome --web-renderer html

To build the app using html renderer use the below command –

flutter build web --web-renderer html --release

Yeah. That’s it. Now your images will load without giving any error.

If you are any issue in this procedure or something else, please leave a comment. I will try to get back to your comment asap.

If you or your friend have some project idea and want to hire some company to develop a mobile app or website for them. Please click here to get it done with us.

Follow us on Facebook

Subscribe our youtube channel.

Author

Alok Singh Chauhan

Comments (4)

  1. Lucky
    April 17, 2021

    It worked for me.

    • Fer Buero Trebino
      May 3, 2021

      Thanks! It worked for me too!

      • Alok Singh Chauhan
        May 4, 2021

        Thanks a lot, guys, for your valuable feedback. ☺

        Anytime you face any issue in flutter or any kind of error in mobile development. Please let me know in the comment section, I will come up with a solution asap.

        Happy Fluttering with Doalongme.

  2. Awad
    May 12, 2021

    It gooog

Leave a comment

Your email address will not be published. Required fields are marked *