Jetpack Compose使用Coil加载URL图片不显示问题求助

你传入Coil的图片地址是省略了协议头的协议相对URL，日志打印的地址为//cdn.weatherapi.com/weather/64x64/night/113.png，这类地址以//开头、缺少https:/http:前缀，不符合Coil对加载URL的格式要求，无法发起有效网络请求，直接就会加载失败。

• 补全URL协议前缀
  拿到接口返回的icon字段后先做格式修正，对//开头的地址手动拼接https:前缀，得到完整合法的绝对地址：

  // 处理接口返回的icon地址
  val fullIconUrl = if (icon.startsWith("//")) {
      "https:$icon"
  } else {
      icon
  }
  

  把处理完成的fullIconUrl传入rememberAsyncImagePainter即可完成最核心的修复。

• 核对基础加载配置
  如果补全地址后仍然无法显示，逐一排查以下常见问题：

  • 确认应用已经声明网络权限，在AndroidManifest.xml中添加权限声明：

    <uses-permission android:name="android.permission.INTERNET" />
    

  • 给Image组件设置明确的尺寸约束，Compose中组件如果没有明确大小、父容器也无尺寸约束，会被判定为0尺寸不执行绘制，建议直接给图标指定固定大小：

    Image(
        painter = rememberAsyncImagePainter(fullIconUrl),
        contentDescription = "condition icon",
        modifier = Modifier.size(64.dp)
    )
    

  • 如果是Android 9及以上系统加载http明文地址，需要配置网络安全规则放开明文流量限制，生产环境建议统一使用https地址避免该问题。

• 打印加载错误日志定位特殊问题
  如果以上配置都没问题还是加载失败，给Coil加错误回调，直接打印具体失败原因，针对性排查：

  Image(
      painter = rememberAsyncImagePainter(
          model = fullIconUrl,
          onError = { loadState ->
              Log.e("CoilDebug", "图标加载失败", loadState.result.throwable)
          }
      ),
      contentDescription = "condition icon",
      modifier = Modifier.size(64.dp)
  )
  

  常见的错误原因包括证书校验失败、接口防盗链拦截、图片格式不支持等，根据日志抛出的异常对应处理即可。

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