Flutter加载网络国旗图片时抛出Asset异常但图片可正常显示

问题根源 #

这个异常的核心原因是CachedNetworkImage对网络URL的解析出现误判，错误地将网络地址当作本地asset路径处理，虽然最终组件会重试并成功加载图片，但中间的错误日志会被输出。常见触发场景包括URL包含多余引号、组件版本bug、缓存数据异常。

具体修复步骤 #

• 升级CachedNetworkImage到最新版本
  旧版本存在URL解析的bug（比如无法正确处理带引号的URL），执行命令升级：

  flutter pub upgrade cached_network_image
  

• 清理URL中的多余字符
  错误日志里的URL带有双引号（"https://***.com/content/icons/AE.png"），说明接口返回的item.icon包含多余引号，使用前先清理：

  CachedNetworkImage(
    imageUrl: item.icon.replaceAll(RegExp(r'^"|"$'), ''), // 移除首尾引号
    // 其他参数保持不变
  )
  

  可以先通过print(item.icon)确认URL的实际格式。

• 显式指定缓存管理器
  强制组件使用网络缓存逻辑，避免误触发asset加载流程：

  import 'package:cached_network_image/cached_network_image.dart';
  
  // ...
  CachedNetworkImage(
    imageUrl: item.icon.replaceAll(RegExp(r'^"|"$'), ''),
    cacheManager: DefaultCacheManager(), // 显式指定默认网络缓存管理器
    height: 25.r,
    width: 33.r,
    fit: BoxFit.cover,
    placeholder: (context, url) => SvgPicture.asset('assets/svg/ic_flag_placeholder.svg'),
    errorWidget: (context, url, error) => SvgPicture.asset('assets/svg/ic_flag_placeholder.svg'),
  )
  

• 清除应用缓存
  旧的异常缓存数据可能残留，导致重复输出错误：

  1. 卸载并重新安装应用
  2. 或者在代码中主动清除缓存（测试用）：

     await DefaultCacheManager().emptyCache();
     

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