首页 > 解决方案 > Flutter:如果网络图像不可用,则避免出现异常

问题描述

如果网络图像可用或返回 404,我试图避免这种exception情况。我期待,DefaultImagePlaceholder在这种情况下它应该返回。因为我创建了一个getNetworkImageV2渲染图像的通用小部件(名为 ),它是小部件内的列表小部件的一部分,正在迭代渲染。

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 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 ================================================

标签: flutterdart

解决方案


  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),
            ),
          );
        }
      },       
  )

推荐阅读