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

Instead of using size(OriginalSize) that impacts image optimization, you can set min height/width for image (for example 1.dp). This will force image to start loading:

Image(
    painter = rememberImagePainter(url),
    contentDescription = null,
    modifier = Modifier
        .fillMaxWidth()
        .defaultMinSize(minHeight = 1.dp),
)

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
    )

Answer 3

If your image OriginalSize is to small for your composable you can also use scale(Scale.FIT) in your builder.

Your image will max fit your composable while keeping it's aspect ratio.

Image(
    rememberImagePainter(
        data = user?.photoUrl?:"",
        builder = {
            size(OriginalSize)
            scale(Scale.FIT)
            transformations(CircleCropTransformation())
        }
    ),
    contentDescription = "Picture",
    contentScale = ContentScale.FillWidth
)