Image.network异常未处理：页面提前退出时抛出HTTP 404错误

问题原因 #

当用户在图片加载完成前退出页面时，ProfileAndCoverImageBuilder的State已被销毁，此时Image.network的错误回调触发，尝试通过已失效的上下文构建Widget，导致errorBuilder无法正常捕获错误，最终抛出未处理的HTTP异常。

解决方案1：原生Flutter处理（无需第三方依赖） #

通过State的挂载状态标记，避免在已销毁的上下文执行错误处理逻辑：

class _ProfileAndCoverImageBuilderState extends State<ProfileAndCoverImageBuilder> {
  bool _isMounted = false;

  @override
  void initState() {
    super.initState();
    _isMounted = true;
  }

  @override
  void dispose() {
    _isMounted = false;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomLeft,
      clipBehavior: Clip.none,
      children: <Widget>[
        AspectRatio(
          aspectRatio: 3 / 2.5,
          child: Container(
            child: Image.network(
              widget.authProvider.coverImageUrl!,
              errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
                // 仅在Widget仍处于挂载状态时处理错误
                if (!_isMounted) {
                  return SizedBox.shrink();
                }
                print("onError B");
                return const Center(child: Text("Error"));
              },
            ),
          ),
        ),
        // 其他Stack子Widget
      ],
    );
  }
}

解决方案2：使用第三方包简化处理 #

使用cached_network_image包，它内部自动处理页面销毁后的请求取消，同时提供缓存、占位符等额外功能：

1. 添加依赖到pubspec.yaml：

dependencies:
  cached_network_image: ^3.3.0 # 请使用最新版本

2. 替换Image.network为CachedNetworkImage：

AspectRatio(
  aspectRatio: 3 / 2.5,
  child: Container(
    child: CachedNetworkImage(
      imageUrl: widget.authProvider.coverImageUrl!,
      errorWidget: (context, url, error) {
        print("onError B");
        return const Center(child: Text("Error"));
      },
    ),
  ),
),

内容的提问来源于stack exchange，提问作者Flutter Dev