Flutter: avoid exception from Network Image if unavailable

Question

I am trying to avoid an exception in case if network image is available or returns 404. I am expecting, it should return the DefaultImagePlaceholder in that case. FOr that I created a common widget (named getNetworkImageV2) which renders an image, is part of the list widget within the widget is rendering iteratively.

Widget getNetworkImageV2(BuildContext context, String image, {BoxFit fit = BoxFit.cover, double height = 60.0, double width = 80.0}) {
  return FadeInImage(
    placeholder: MemoryImage(kTransparentImage),
    image: NetworkImage(image),
    fit: fit,
    height: height,
    width: width,
    fadeInDuration: Duration(milliseconds: 100),
    placeholderErrorBuilder: (context, ob, stack) => Container(child: Image.asset(DefaultPlaceholder, fit: fit, height: height, width: width)),
    imageErrorBuilder: (context, ob, stack) => Container(child: Image.asset(DefaultPlaceholder, fit: fit, height: height, width: width)),
  );
}

Exception:

======== Exception caught by image resource service ================================================
The following NetworkImageLoadException was thrown resolving an image codec:
HTTP request failed, statusCode: 404, https://i.ytimg.com/vi/WdGayNA5NUA/hqdefault.jpg

When the exception was thrown, this was the stack: 
#0      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:99:9)
<asynchronous suspension>
#1      NetworkImage.load (package:flutter/src/painting/_network_image_io.dart:50:14)
#2      ImageProvider.resolveStreamForKey.<anonymous closure> (package:flutter/src/painting/image_provider.dart:504:13)
#3      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:355:22)
...
Image provider: NetworkImage("https://i.ytimg.com/vi/WdGayNA5NUA/hqdefault.jpg", scale: 1.0)
Image key: NetworkImage("https://i.ytimg.com/vi/WdGayNA5NUA/hqdefault.jpg", scale: 1.0)
====================================================================================================

======== Exception caught by image resource service ================================================
HTTP request failed, statusCode: 404, https://i.ytimg.com/vi/4sO_n7fn02I/hqdefault.jpg
====================================================================================================
I/flutter ( 5824): VIDEO-API: http://10.0.2.2:3001/api/_w/videos/1559520687419294485/detail

======== Exception caught by image resource service ================================================

Have you tried [this link](https://stackoverflow.com/a/52569475/4696843)? — Aref, Jan 31 '21 at 10:30
that link is returning 404 I know. But after catching an error in `imageErrorBuilder` why its still on the console. — Sankalp, Jan 31 '21 at 11:02

score 1 · Answer 1 · answered Jan 31 '21 at 11:03

  Image.network(
      "URL",
      fit: BoxFit.cover,
      loadingBuilder: (BuildContext ctx, Widget child, ImageChunkEvent loadingProgress) {
        if (loadingProgress == null) {
          return child;
        }else {
          return Center(
            child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
            ),
          );
        }
      },       
  )

score 0 · Answer 2 · answered Jan 31 '21 at 10:54

You can user image network or cachecdnetworkimage for fetching image and u can use errorbuilder in case of exceptions like this:

     Image.network('Your image url...',
       errorBuilder: (BuildContext context, Object exception, StackTrace stackTrace) {
    return Text('Your error widget...');
   },
  ),

Please try it!

Flutter: avoid exception from Network Image if unavailable

2 Answers2