Jetpack Compose Images loaded from URL are always black

Question

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

@GabrieleMariotti I used social messenger login API. The `kakaoProfile` variable is the login result value of the social messenger, and the profile information object of the corresponding account is entered. `kakaoProfile.value!!.profileImageUrl!!` the value of is a link to the profile picture of the logged-in account(like this: https://k.kakaocdn.net/dn/IOMxT/btqYvUIVMAL/VZCdMjf01kxnkFFZFNDJ81/img_640x640.jpg). declare: `val kakaoProfile = remember { mutableStateOf(null) }` — Ji Sungbin, May 08 '21 at 07:07
Did you check if `kakaoProfile.value` or `profileImageUrl` are null? — Marat, May 13 '21 at 09:45
@Marat I checked that's value is `https://k.kakaocdn.net/dn/IOMxT/btqYvUIVMAL/VZCdMjf01kxnkFFZFNDJ81/img_640x640.jpg`. (not null) — Ji Sungbin, May 14 '21 at 07:04
did you try loading another image? like hardcode a simple image — Martin Marconcini, May 14 '21 at 07:17
@MartinMarconcini I've tried another image with a local storage URI. But it's the same result. (tint all black) — Ji Sungbin, May 14 '21 at 10:18
I haven't played much with Compose since I have a full-time job and who has time to play with Alpha stuff? :D but.. could it be that `Icon` is the culprit here? Have you seen this? https://stackoverflow.com/questions/58594262/how-do-i-load-url-into-image-into-drawimage-in-compose-ui-android-jetpack — Martin Marconcini, May 14 '21 at 10:48
@MartinMarconcini The image is not entirely black, but the shape of the image appears, and all of these images are displayed in black.(like: `app:tint="#000"`) I'll refer to the link you attached. Thanks. — Ji Sungbin, May 14 '21 at 16:04

score 32 · Answer 1 · answered Aug 02 '21 at 22:04

32

Get rid of the tint on your Icon.

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

answered Aug 02 '21 at 22:04

Dan Brough

2,745
1
24
24

1

Should be mark as a write answer! – Edhar Khimich Mar 09 '22 at 14:29
Should be mark as a write answer! (2) – if_alan Nov 16 '22 at 02:39
2

Why is there tint by default which you need to undo?? – Sam Jan 23 '23 at 20:48

score 16 · Accepted Answer · answered Jul 10 '21 at 07:10

16

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

answered Jul 10 '21 at 07:10

ligi

39,001
44
144
244

Jetpack Compose Images loaded from URL are always black

2 Answers2