Cannot catch NetworkImageLoadException when Image.network() failed

Question

I use Image.network() to show image from URL this is how I use it

Image image = Image.network(
      _auth.currentUser!.photoURL!,
      width: 100.getWidth(context),
      height: 100.getWidth(context),
      frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
        return wasSynchronouslyLoaded
            ? child
            : _profileImagePlaceholder(context);
      },
      loadingBuilder: (context, child, loadingProgress) {
        return loadingProgress == null
            ? child
            : _profileImagePlaceholder(context);
      },
      errorBuilder: (context, error, stackTrace) {
        return _profileImagePlaceholder(context);
      },
    );

But even when I set errorBuilder or even wrap the whole thing with try/catch This NetworkImageLoadException still show

Full Exception

The following NetworkImageLoadException was thrown resolving an image codec:
HTTP request failed, statusCode: 403,


When the exception was thrown, this was the stack:
#0      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:99:9)
<asynchronous suspension>
...

Image provider:
  NetworkImage("https://firebasestorage.googleapis.com/v0/b/biddee-co.appspot.com/o/profiles%2FdefaultProfile.png?alt=media&token=a4a99031-aabd-4597-b075-77ecb2d3e594",
  scale: 1.0)
Image key:
  NetworkImage("https://firebasestorage.googleapis.com/v0/b/biddee-co.appspot.com/o/profiles%2FdefaultProfile.png?alt=media&token=a4a99031-aabd-4597-b075-77ecb2d3e594",
  scale: 1.0)

Answer 1

You can use ErrorBuilder for that

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

Find out Documentation from here

Answer 2

in package:flutter/src/painting/_network_image_io.dart

if (response.statusCode != HttpStatus.ok) {
    // The network may be only temporarily unavailable, or the file will be
    // added on the server later. Avoid having future calls to resolve
    // fail to check the network again.
    await response.drain<List<int>>();
    throw image_provider.NetworkImageLoadException(statusCode: response.statusCode, uri: resolved);
}  

That comment is what cause exception.

The network may be only temporarily unavailable, or the file will be added on the server later. Avoid having future calls to resolve fail to check the network again.

Answer 3

I tried also cached_network_image package and also try catch. But I couldn't find the solution. Then I made a basic implementation. I have small pictures so this solution works for me for now.

  import 'package:http/http.dart' as http;

  Map<String, Image?> imageDict = {};
  String name;
  String? profilepiclink;

  Future<Image?> fetchImage() async {
    if (imageDict[name] != null) {
      return imageDict[name];
    } else {
      final response = await http.get(Uri.parse(profilepiclink!));
      if (response.statusCode == 200) {
        // If the server did return a 200 OK response,
        // then parse the JSON.
        Image pic = Image.memory(response.bodyBytes);
        imageDict[name] = pic;
        return pic;
      } else {
        // If the server did not return a 200 OK response,
        // then throw an exception.
        return null;
      }
    }
  }

  Future<Widget> _displayProfilePic() async {
    if (profilepiclink != null) {
      Image? profilPic = await fetchImage();

      return Container(
          width: 30,
          height: 30,
          clipBehavior: Clip.hardEdge,
          child: profilPic ?? const Icon(Icons.person),
          decoration: const BoxDecoration(shape: BoxShape.circle));
    }
    return const SizedBox(width: 30, child: Icon(Icons.person));
  }

  var image = FutureBuilder<Widget>(
            future: _displayProfilePic(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return snapshot.data!;
              }
              return const Icon(Icons.person);
           })