Jetpack Compose Images loaded from URL are always black

Viewed 2260

I've used Glide and Coil to load images by URL via Jetpack Compose.
However, images only come in black. How can I fix this?

My Compose and Coil version is the newest version.

value of kakaoProfile.value!!.profileImageUrl!!: https://k.kakaocdn.net/dn/IOMxT/btqYvUIVMAL/VZCdMjf01kxnkFFZFNDJ81/img_640x640.jpg

This is my code:

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.End,
    verticalArrangement = Arrangement.Center
{
    if (kakaoProfile.value == null) {
        Icon(
            imageVector = Icons.Outlined.AccountCircle,
            contentDescription = null,
            modifier = Modifier.size(100.dp),
            tint = colors.primary
        ) 
    } else {
        Icon(
            painter = rememberCoilPainter(kakaoProfile.value!!.profileImageUrl!!),
            contentDescription = null,
            modifier = Modifier.size(100.dp)
        )
    }
}
.
.
.
Button(
    modifier = Modifier.padding(start = 8.dp),
    shape = RoundedCornerShape(15.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color(0xFF393939)),
    onClick = {
        if (kakaoProfile.value == null) {
            UserApiClient.instance.loginWithKakaoTalk(context) { token, error ->
                if (error != null) {
                    Log.e("TAG", "Login Fail", error)
                } else if (token != null) {
                    UserApiClient.instance.me { user, _ ->
                        kakaoProfile.value = user?.kakaoAccount?.profile
                    }
                }
            }
        } else {
            UserApiClient.instance.logout {
                kakaoProfile.value = null
            }
        }
    }
) {
    Text(
        text = if (kakaoProfile.value == null) "login" else "logout",
        fontSize = 18.sp,
        color = Color.White
    )
}

Result Screen: (oragne circle is Icon)
problem screen

2 Answers

Get rid of the tint on your Icon.

Icon(
  painter = rememberImagePainter(imageURL),
  contentDescription = null,
  modifier = Modifier.size(42.dp),
  tint = Color.Unspecified
)

I ran into the same problem and I needed to change Icon to Image - seems Icons are black and white (shapes) in compose.

Related