Flutter中Image.network的404错误处理异常问题

你的代码中errorBuilder其实已经生效，UI上会在图片加载失败时显示Icons.person图标。控制台出现的404异常日志是Flutter debug模式下的默认调试输出，不会影响应用运行，发布到release模式后该日志会自动消失。

如果想在debug模式下也屏蔽这类日志，或者更优雅地处理图片加载错误，可以尝试以下两种方案：

方案一：使用第三方图片加载库（推荐） #

使用cached_network_image库，它对错误处理的封装更完善，默认不会输出冗余的网络错误日志，还支持缓存功能。

1. 在pubspec.yaml中添加依赖：

dependencies:
  cached_network_image: ^3.2.3

2. 修改代码替换Image.network：

ListView.builder(
  itemCount: steamUsers.length,
  itemBuilder: (context, index) => ListTile(
    leading: CircleAvatar(
      child: steamUsers[index].avatarUrl != null
          ? CachedNetworkImage(
              imageUrl: steamUsers[index].avatarUrl!,
              errorWidget: (context, url, error) => const Icon(Icons.person),
              fit: BoxFit.cover,
            )
          : const Icon(Icons.person),
    ),
    title: Text(steamUsers[index].accountName),
    subtitle: Text(steamUsers[index].personName),
  ),
)

方案二：自定义HttpOverrides拦截错误日志 #

通过自定义HttpOverrides来覆盖默认的HTTP客户端，在内部捕获并过滤掉图片加载的404错误日志：

class MyHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext? context) {
    return super.createHttpClient(context)
      ..handleError((error) {
        // 过滤图片加载的404错误
        if (error is HttpClientException && error.statusCode == 404 && error.uri.path.contains('.jpg')) {
          return true;
        }
        return false;
      });
  }
}

// 在main函数中初始化
void main() {
  HttpOverrides.global = MyHttpOverrides();
  runApp(const MyApp());
}

另外，检查你的图片URL，异常中的URL后缀是.jg，大概率是拼写错误（应该是.jpg），修正URL也能从根源避免这类错误。

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