” 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.
You can see my current flutter configuration in below image –
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 –
- HTML Renderer
- 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.
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.