Flutter中CachedNetworkImage报URI无主机错误的原因排查

为什么第一种方式会抛出异常 #

• 你的fishImage初始值是空字符串，而Flutter的build方法会在initState执行后立刻触发——这时候异步的getFishData还没跑完，fishImage还是空的。
• CachedNetworkImage拿到空字符串URL后，会尝试解析成URI，空字符串没有主机地址，直接触发ArgumentError: Invalid argument(s): No host specified in URI异常。
• 虽然之后getFishData获取到有效URL后，调用setState更新fishImage触发重绘，图片能正常显示，但第一次build时的错误已经产生了。

和StreamBuilder实现的本质差异 #

StreamBuilder是通过监听快照状态来控制渲染：

• 数据未就绪时（连接等待阶段），只会显示进度指示器，根本不会执行CachedNetworkImage的加载逻辑；
• 只有当快照拿到有效URL后，才会渲染CachedNetworkImage，从根源避免了加载无效URL的情况。

保留变量复用的修复方案 #

如果想继续复用fishImage变量，只需在build阶段加个判断，避免加载空URL：

if (fishImage.isEmpty) {
  return CircularProgressIndicator(); // 也可以用自定义占位图
} else {
  return CachedNetworkImage(imageUrl: fishImage);
}

这样第一次build时会显示占位组件，不会让CachedNetworkImage处理无效URL，等数据加载完成后再切换为图片组件，既保留变量复用，又不会抛出异常。

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