SuperAPI AI 工具集

image-fallback-url-retry-in-composition

编程与开发

查看项目

更新于 10-17 16:16

技能介绍

用途 本技能针对图片源以可预测 URL 发布多种尺寸版本的场景:高分辨率版本并非每条记录都存在,部分记录返回 404。只指向高分辨率 URL 时,图片本身会退化为占位图,但由该图片派生的下游效果(如调色板提取)不会发生,且这种失败在界面上不易察觉。该技能提供在 Compose 中实现回退重试的模式与检查方法。

主要能力

  • 将图片 URL 保存为 composition 状态:var imageUrl by remember(record.id) { mutableStateOf(record.imageUrl) }。
  • 在 AsyncImage 的 onError 回调中,用 replace 把一个变体标记替换为源保证存在的变体,并以 fallback != imageUrl 作为守卫,保证第二次失败时为无操作,避免无限请求/错误循环。
  • 请求模型 .data(imageUrl) 与 .diskCacheKey(imageUrl + "BIGGER") 读取同一份可变状态,避免重试成功后写错缓存条目。
  • remember 必须带记录键,记录切换时重置状态;不带键会把上一条记录的替换 URL 留在状态里。
  • 对来自其他主机、不含变体标记的 URL,replace 返回原字符串,守卫为假,自然无操作。
  • 当图片被视频或全屏动画遮挡时,用 alpha(0f) 隐藏并保留布局与请求,不要用条件移除节点,否则加载被取消、onSuccess 不触发。
  • 重试放在 composition 层,因为只有图片加载器的错误回调知道请求失败;数据层探测会多一次网络往返。

使用方式 按上述模式修改 AsyncImage 调用:状态声明、请求构建、成功与失败回调。文中给出验证用 grep 命令:查找 onError 中的 replace 调用;检查 .data() 与 diskCacheKey() 是否读取同一状态;检查条件包裹的 AsyncImage;并通过打开缺失高分辨率变体的记录两次、观察网络日志确认首次回退后二次访问命中缓存且无网络请求。

适用场景 Android Jetpack Compose 项目中使用 Coil AsyncImage 加载图片,且图片成功回调驱动调色板、主题取色或生成配色方案的场景。条件包裹装饰性图片通常无妨,但喂给调色板的图片必须保持组合。

限制与注意事项 文中未提供完整项目代码、依赖版本或具体 API 兼容范围。替换逻辑假定源站 URL 变体标记可预测;不匹配时视为无操作。页面偏黑或中性色时需先区分是调色板从未被喂入还是仍在加载中,不应直接加回退重试。缓存键不一致的问题在第二次访问该记录前不会显现。