Flutter新闻APP：如何处理图片加载时HTTP错误-1/7的情况

问题场景 #

开发基于Flutter的新闻APP，集成newsapi.org的top-headlines接口获取新闻内容：

• 选择美国地区时，所有新闻图片加载正常
• 切换到委内瑞拉（ve）地区后，部分新闻图片的来源域名被本地网络封禁，使用http包加载这类图片时返回err -1或err 7，直接导致APP崩溃
• 已确保安卓虚拟设备网络正常，代码遵循空安全规范，API返回数据通过Model处理，确认问题根源是域名封禁导致的图片加载失败

解决方案 #

通过FadeInImage组件的imageErrorBuilder属性添加错误处理逻辑，当图片加载失败时，显示预设的占位图或提示文本，避免APP崩溃。

代码示例 #

FadeInImage(
  placeholder: AssetImage('assets/loading_placeholder.png'), // 加载中的占位图
  image: NetworkImage(newsModel.urlToImage ?? ''), // 新闻图片URL，空安全处理
  imageErrorBuilder: (context, error, stackTrace) {
    // 加载失败时返回自定义错误UI，比如占位图
    return Image.asset(
      'assets/fallback_image.png',
      fit: BoxFit.cover,
    );
    // 也可以返回文本提示：
    // return Center(child: Text('图片无法加载'));
  },
  fit: BoxFit.cover,
)

关键说明 #

• imageErrorBuilder会在图片加载出现错误时触发，接收上下文、错误对象和堆栈追踪三个参数，返回一个Widget作为错误状态的UI
• 结合空安全规范，对urlToImage进行空值判断，避免传入空字符串导致额外异常

内容的提问来源于stack exchange，提问作者Mario Vicuña