Flutter：Image.network加载失败时如何设置默认AssetImage？

嘿，这个场景我在开发中经常碰到，咱们直接把问题拆解清楚：

首先明确回答你的核心疑问：不能通过直接捕获Image.network抛出的异常来实现需求。因为Flutter的Image.network内部已经封装了完整的错误处理逻辑，它不会把加载失败的情况以“抛出异常”的形式暴露给上层代码，你用try-catch包裹它完全没用哦。

不过别担心，官方提供了更优雅的解决方案，下面是两种最常用的实现方式：

1. 利用Image.network的errorBuilder参数（推荐） #

这是最直接的方式，errorBuilder是Image.network自带的回调，当图片加载失败（比如网络错误、地址无效、图片损坏）时会自动触发，你可以在这个回调里返回自定义的Widget——也就是你的本地默认图。

示例代码：

Image.network(
  'https://your-invalid-image-url.com/image.jpg',
  // 可选：添加加载中的占位效果
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return const Center(
      child: CircularProgressIndicator(strokeWidth: 2),
    );
  },
  // 关键：加载失败时返回本地默认图
  errorBuilder: (context, error, stackTrace) {
    // 可选：打印错误信息用于调试
    debugPrint('图片加载失败详情：$error');
    return Image.asset('assets/images/default_avatar.png');
  },
)

errorBuilder的三个参数可以帮你做更多调试：

• context：当前的BuildContext
• error：加载失败的具体错误信息（比如404、网络超时）
• stackTrace：错误的堆栈跟踪，方便定位深层问题

2. 使用FadeInImage.assetNetwork实现渐变过渡+错误处理 #

如果你想要加载时的平滑渐变动画，或者同时需要加载占位图和错误图，可以用FadeInImage组件，它同样支持错误回调：

示例代码：

FadeInImage.assetNetwork(
  // 加载中的占位图（本地资源）
  placeholder: 'assets/images/loading_placeholder.png',
  // 目标网络图片地址
  image: 'https://your-invalid-image-url.com/image.jpg',
  // 加载失败时的默认图
  imageErrorBuilder: (context, error, stackTrace) {
    return Image.asset('assets/images/default_avatar.png');
  },
  // 可选：设置图片适配模式
  fit: BoxFit.cover,
)

3. 封装自定义Widget实现全局复用 #

如果你的项目中很多页面都需要这个逻辑，可以封装一个自定义组件，避免重复写代码：

class NetworkImageWithFallback extends StatelessWidget {
  final String imageUrl;
  final String fallbackAsset;
  final BoxFit? fit;

  const NetworkImageWithFallback({
    super.key,
    required this.imageUrl,
    required this.fallbackAsset,
    this.fit,
  });

  @override
  Widget build(BuildContext context) {
    return Image.network(
      imageUrl,
      fit: fit,
      errorBuilder: (context, error, stackTrace) {
        return Image.asset(
          fallbackAsset,
          fit: fit,
        );
      },
      loadingBuilder: (context, child, loadingProgress) {
        if (loadingProgress == null) return child;
        return const Center(child: CircularProgressIndicator());
      },
    );
  }
}

// 使用方式超简单
NetworkImageWithFallback(
  imageUrl: 'https://your-invalid-image-url.com/image.jpg',
  fallbackAsset: 'assets/images/default_avatar.png',
)

内容的提问来源于stack exchange，提问作者Jesús Martín