handle image errors when image doesn't exist in flutter

Question

I am trying to load an image with FadeInImage, but when the image path does not exist, an AssetImage is loaded. However, the NetworkImage throws me error: HTTP request failed, statusCode: 404

I tried to do it with AdvancedNetworkImage and it works fine, but when the image is replaced by another, AdvancedNetworkImage keeps loading the old image, I guess it's the cache. I have disabled the options associated with cache, but it continues loading the previous image.

FadeInImage photoItem = FadeInImage(
        image: AdvancedNetworkImage('$urlapi/api/items/$itemID/images', 
            fallbackAssetImage: 'assets/images/add_photo.png',
            disableMemoryCache: true, 
            cacheRule: CacheRule(maxAge: Duration(seconds: 1)),
            timeoutDuration: Duration(seconds: 1),
            useDiskCache: false, ),
        placeholder: AssetImage('assets/images/add_photo.png'),
        fadeInDuration: Duration(milliseconds: 150),
        fit: BoxFit.contain,
      );

Any ideas how this could be handled?

Gaith Rammaha · Answer 1 · 2022-09-01T17:16:11.880

The method is simple, use existing alternative images "placeholderErrorBuilder/imageErrorBuilder" and trying code as below

  Container(
padding: const EdgeInsets.only(left: 4),
child: FadeInImage(
    fadeInDuration: const Duration(milliseconds: 1000),
    image: CachedNetworkImageProvider(
     '$urlapi/api/items/$itemID/images',
      errorListener: () {},
    ),
    height: 80,
    width: 80,
    fit: BoxFit.fill,
    imageErrorBuilder: (context, error, stackTrace) =>
        SvgPicture.asset(
          "assets/images/example.svg",
          fit: BoxFit.fill,
          height: 70,
          //  color: Colors.white,
        ),
    placeholderErrorBuilder: (context, error, stackTrace) =>
        SvgPicture.asset(
          "assets/images/sliderph.svg",
          fit: BoxFit.fill,
          height: 70,
          //  color: Colors.white,
        ),
    placeholder: AssetImage('assets/images/add_photo.png')),
),

score 0 · Answer 2 · answered Jul 12 '20 at 18:06

0

Try using cahced_network_image. It has both placeholder and error widget options. Refer here for fade in.

answered Jul 12 '20 at 18:06

Prasanna Kumar

368
1
5
14

1

I just tried it, and it also fails with 404 error, I put it inside a try catch, and keep throwing error: Exception has occurred. HttpExceptionWithStatus (HttpException: Invalid statusCode: 404 – Jorge Rodriguez Jul 12 '20 at 18:52
1

The status code 404 simply means the URL is not found. Please print the URL (i.e. `'$urlapi/api/items/$itemID/images'`) and check if the URL is reachable in a browser. The errorWidget widget is displayed when the target imageUrl failed loading. – Prasanna Kumar Jul 13 '20 at 08:17

handle image errors when image doesn't exist in flutter

2 Answers2