Coil placeholder not showing if vectorpainter is used in jetpack compose

Question

I am using the following code to display an image.

       AsyncImage(
               model = createImageUrl(audio.image_path),
                   contentDescription = "Song Artwork",
                    modifier = Modifier.fillMaxHeight()
                                       .aspectRatio(1f)
                                       .padding(horizontal = 4.dp),
                    placeholder = rememberVectorPainter(image = Icons.Outlined.MusicNote)
                )

The placeholder image is not being shown. Howeve, if I use placeHolder = painterResource(R.drawable.someDrawableInMyResource), the drawable is being shown when image is loaded.

What am I doing wrong?

Answer 1

var loaded by remember {
        mutableStateOf(false)
    }
    AsyncImage(
        model = createImageUrl(audio.image_path),
        contentDescription = "Song Artwork",
        modifier = Modifier.fillMaxHeight().aspectRatio(1f).padding(horizontal = 4.dp),
        placeholder = rememberVectorPainter(image = Icons.Default.MusicNote),
        error = rememberVectorPainter(image = Icons.Default.MusicNote),
        fallback = rememberVectorPainter(image = Icons.Default.MusicNote),
        onSuccess = {
            loaded = true
        },
        colorFilter = if (!loaded) ColorFilter.tint(LocalContentColor.current) else null
    )

I used this workaround and this works. I am open for another clean suggestions.

Answer 2

I found what I was doing wrong. I was in dark theme and the image vector`s tint color matched my background and thus nothing was being shown.

May help someone.

Edit: Well my question changed.. How to change placeholder tint to match my theme?