Auto Height Jetpack Compose Coil Image

Question

I am trying to show an image with fill width and auto height using Jetpack Compose Coil. I want the image to take the full width and auto height. But the image only showing when I specify a fixed height.

Image(
    painter = rememberImagePainter(
        data = post.image
    ),
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.fillMaxWidth()
)

I tried with .fillMaxHeight() and .fillMaxSize() but it's not working. Is there any way I could achieve this?

Answer 1

This happens when one of view width/height is calculated as zero, which means it shouldn't be displayed and no need to download it. Check out more about the reasons in this issue on compose tracker.

You should make your size not being equal to zero. Depending you your layout it can be done with variations of width/height/aspect ratio modifiers.

If you'd like to get your image in original size, you can to add size(OriginalSize) to painter builder. This will force image to start loading. This parameter makes your view download and put into the memory full size of the image, without optimizing it for the current view. So use it carefully, only if you're sure the image won't be too big and you really can't add use size modifiers.

Image(
    painter = rememberImagePainter(
        data = post.image,
        builder = {
            size(OriginalSize)
        },
    ),
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.fillMaxWidth()
)

Answer 2

With latest Coil 2.1.0 you can do like this:

val model = ImageRequest.Builder(LocalContext.current)
            .data(imageUrl)
            .size(Size.ORIGINAL)
            .crossfade(true)
            .build()
val painter = rememberAsyncImagePainter(model)
Image(
     modifier = Modifier.fillMaxWidth(),
     painter = painter,
     contentDescription = null,
     contentScale = ContentScale.FillWidth
    )