Flutter中CachedNetworkImage的404错误处理问题

你的问题出在无效URL的格式错误（比如示例里嵌套的https://），这种错误会导致CachedNetworkImage在解析URL阶段就抛出异常，还没走到errorWidget的逻辑，所以应用崩溃。可以通过以下步骤解决：

1. 提前校验并修复URL #

写一个辅助函数，提前过滤格式错误的URL，替换为你的默认错误图片：

String getValidImageUrl(String? url) {
  // 空值直接返回默认图
  if (url == null || url.trim().isEmpty) {
    return NewsConstants.errorImage;
  }
  // 过滤包含重复协议头的错误URL
  final hasDuplicateProtocol = url.contains('https://https://') || url.contains('http://http://');
  if (hasDuplicateProtocol) {
    return NewsConstants.errorImage;
  }
  // 用Uri.tryParse验证URL合法性，非绝对路径的也替换
  final uri = Uri.tryParse(url);
  if (uri == null || !uri.isAbsolute) {
    return NewsConstants.errorImage;
  }
  return url;
}

2. 修改CachedNetworkImage的调用 #

把原来直接取news['urlToImage']的逻辑替换成调用上面的函数：

CachedNetworkImage(
  imageUrl: getValidImageUrl(news['urlToImage']),
  progressIndicatorBuilder: (context, url, downloadProgress) =>
      CircularProgressIndicator(value: downloadProgress.progress),
  errorWidget: (context, url, error) => const Icon(Icons.error),
)

额外注意 #

• 确保NewsConstants.errorImage是一个有效的可访问URL，如果是本地图片，需要适配CachedNetworkImage的本地资源加载方式（比如将Asset路径转换为合适的格式）。
• 经过提前校验后，正常的404错误会触发errorWidget显示错误图标，格式错误的URL直接被替换成默认图，不会再崩溃。

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