Flutter：CachedNetworkImage未指定URL或加载失败致应用崩溃的解决办法

嘿，我之前也踩过这个坑！确实CachedNetworkImage的errorWidget能处理绝大多数网络加载错误，但要覆盖空URL、无效URL、404这些场景，得结合前置校验和正确配置errorWidget才行，下面给你详细说：

1. 先做URL的前置校验，避免参数级别的崩溃 #

errorWidget是在发起网络请求后出现错误才会触发的，但如果直接传null、空字符串或者格式完全不对的URL（比如不带http/https），库内部可能在参数校验阶段就抛出异常，这时候errorWidget根本没机会生效。所以第一步要先过滤无效URL：

// 假设你的图片URL来自这个变量
String? targetImageUrl;

Widget buildImage() {
  // 先校验URL是否合法
  if (targetImageUrl == null 
      || targetImageUrl.isEmpty 
      || !targetImageUrl.startsWith(RegExp(r'https?://'))) {
    // 直接返回自定义的错误占位Widget
    return _buildErrorPlaceholder();
  }

  // URL合法的情况下，再使用CachedNetworkImage
  return CachedNetworkImage(
    imageUrl: targetImageUrl,
    placeholder: (context, url) => Center(child: CircularProgressIndicator()),
    // 配置errorWidget处理网络加载错误（包括404、连接失败等）
    errorWidget: (context, url, error) => _buildErrorPlaceholder(),
  );
}

// 自定义错误占位Widget，确保返回有效Widget，不要返回null
Widget _buildErrorPlaceholder() {
  return Container(
    color: Colors.grey[200],
    alignment: Alignment.center,
    child: Icon(
      Icons.broken_image,
      color: Colors.grey[600],
      size: 48,
    ),
  );
}

2. 用errorWidget覆盖网络请求阶段的错误 #

当URL格式合法，但请求时出现404、网络超时、服务器错误等情况，errorWidget就会自动触发。这里要注意：

• 必须返回一个非null的Widget，哪怕是个空Container也行，返回null还是会导致崩溃
• 可以通过error参数查看具体错误类型，做差异化提示（比如区分404和网络断开）

示例：

errorWidget: (context, url, error) {
  // 可选：打印错误信息用于调试
  debugPrint('图片加载错误: $error');
  // 根据错误类型返回不同Widget
  if (error.toString().contains('404')) {
    return Center(child: Text('图片不存在'));
  } else {
    return _buildErrorPlaceholder();
  }
},

3. 如果使用CachedNetworkImageProvider的情况 #

如果你是通过CachedNetworkImageProvider配合Image组件使用，那就要用Image的errorBuilder属性来处理错误，逻辑和上面一致：

Image(
  image: CachedNetworkImageProvider(
    targetImageUrl ?? '',
  ),
  errorBuilder: (context, error, stackTrace) => _buildErrorPlaceholder(),
  placeholder: (context, url) => CircularProgressIndicator(),
)

这样一套组合下来，不管是URL无效、空值还是网络请求错误，都能被妥善处理，不会再出现崩溃的情况啦！

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