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

最新推荐文章于 2025-10-31 10:19:10 发布

原创最新推荐文章于 2025-10-31 10:19:10 发布 · 1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#debug #flutter

flutter 专栏收录该内容

7 篇文章

订阅专栏

在Flutter开发中遇到Image.network()加载网络图片时出现404错误，导致真机调试卡死。尝试多种网络上的解决办法无效后，通过原生请求检测图片链接有效性，结合全局参数和GetBuilder控制图片显示，成功解决问题。

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

在使用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,
                                            )),

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

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

如有更好的解决方案，评论给我，谢谢！