Flutter NetworkImage handle 403 error

Question

In my Flutter mobile app while loading profile image of users through NetworkImage(), I am getting 403 status code in response.

How can I handle this by displaying an Image from my assets folder in case of 403 status code or if image URL is broken etc.

Currently I've handled it by sending a HTTP GET request to the image URL and checking if the status code is 200. If it is 200 I use the NetworkImage() or else I use AssetImage() to load the image and use a FutureBuilder() to build the Widget.

While this works perfectly, I feel this a lot of trouble for handling such a small scenario and it can be done in a better way that I am unaware of.

What is the best way to handle such scenarios?

Lining

You can put use a stack widget and load both AssetImage and NetworkImage. NetworkImage will be shown on top of AssetImage if it loads successfully. But in this way, the asset widget will load anyway. – Pes

This wont work for my situation, and it would still throw the exception just that you wont notice the difference. I was looking for something like a fallback on loading error. Also is wont it affect the performance if I load 2 images when only 1 was required? – Lining

If networkImage fails, it will throw an exception and it's not a total disaster! this solution is easy with minimum cost. But I agree with you. this doesn't feel right. check this out: github.com/flutter/flutter/issues/6229 – Pes

I'm having the exact same situation. Have you found a solution for this "problem" by now? – Rupp

Answer 1

Please try below approach. Here, If image is available, It will load network image else it will redirect to the error callback. In error callback you can return the widget you want. In your case, you want to load from asset so you can use it like as below. If you want to check error status code, you need to parse the exception that I have print.

 Image.network('https://www.outbrain.com/techblog/wp-content/uploads/2017/05/road-sign-361513_960_720.jpg',
            errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
            print("Exception >> ${exception.toString()}");           
              return Image.asset('assets/images/lake.jpg');
            },
          )

Whelp

Answer 2

I achieved this by using precacheImage. This will precache your image to flutter cache. It also has a onError function where you can handle errors while caching the image.

String validatedUrl;

precacheImage(
  NetworkImage(urlToCheck),
  context,
  onError: (
    exception,
    stacktrace,
  ) {
    print(exception.toString());
    setState(() {
      validatedUrl = '';
    });
  },
).whenComplete(() {
  if (validatedUrl == null) {
    setState(() {
      validatedUrl = urlToCheck;
    });
  }
});

Then validatedUrl is either null, empty or carries the validated url.

• null -> not validated yet
• empty -> error while downloading image
• url -> successfully downloaded image

Rupp

Answer 3

You did it simple for this scenario, I didnt see any trouble:

  if (response.statusCode == 200) {
    return NetworkImage();
  } else {
    return AssetImage();
  }

Lakeishalakeland

I don't want to have to send a GET request prior to loading the image. This is what I've already done. – Lining