flutter Image.network()网络图片加载失败,404错误的异常处理和解决方法初探

今天碰到一个让人异常头疼的错误:

在使用Image.network()的时候,有个图片网址404了,flutter 真机调试一直卡死,绝对是一个大BUG。

网上找了各种方法:

一:

  Image image = Image(image: new CachedNetworkImageProvider(''));
Image image = Image.network('');
final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
stream.addListener((_, __) {}, onError: (dynamic exception, StackTrace stackTrace) {
  //TODO error callback
});

二:

child: Image.network(
          "https://2a.zol-img.com.cn/product/124_501x2000/746/cexItD2yJ21Rs.jpg",
          loadingBuilder: (context, child, loadingProgress) {
            return loadingProgress == null ? child : LinearProgressIndicator();
          },
        )

还有其他各种各样的方法,全部尝试了一遍,竟然没有一个是能用的。

折腾了几个小时,发现不论怎么try..catch,就是无法捕获异常。

经常分析,很可能是用了dio的缘故。

所以我只好曲线救国,使用如下方法来处理:

首先使用原生的request请求,探测该链接是否有成功的返回值;

其次,如果成功返回,说明图片有效,于是用get设置一个全局参数,例如showAvatar=true;

最后,在需要展示图片的位置使用GetBuilder来决定是否显示头像。

分享部分代码供参考:

 import 'dart:io';
 _getImgTest(url) async {//url为头像链接地址,
    try {
      var request = await httpClient.getUrl(Uri.parse(url));
      var response = await request.close();
      if (response.statusCode == HttpStatus.ok) {  //链接正常则返回HttpStatus.ok
        print('头像加载成功');
        Get.find<LoginController>().showAvatar(true);
        return true;
      } else {
        print("头像加载失败");
        Get.find<LoginController>().showAvatar(false);
        return false;
      }
    } catch (e) {
      print(e);
      Get.find<LoginController>().showAvatar(false);
      return false;
    }
  }
 GetBuilder<LoginController>(
                                      builder: (controller) => controller
                                              .showAvatar
                                          ? Image.network(
                                              //如成功显示用户头像
                                               http://头像地址,
                                              width: 60,
                                              height: 60,
                                            )
                                          : Image.asset(
//失败显示默认图片
                                              "assets/images/user_avatar.png",
                                              width: 60,
                                              height: 60,
                                            )),

虽说多走了几步路,但总归是把问题给解决了。

希望能帮到陷入相同困境的你。

如有更好的解决方案,评论给我,谢谢!


版权声明:本文为jp192021原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。