coil-kt/coil

Image displayed at placeholder aspect ratio

Open

#1505 opened on Oct 11, 2022

View on GitHub
 (7 comments) (0 reactions) (0 assignees)Kotlin (11,779 stars) (757 forks)batch import
help wanted

Description

Describe the bug It appears that using a combination of Placeholder, Crossfade and ContentScale.FillWidth will cause an image to be displayed at the placeholder aspect ratio and not the final image.

To Reproduce The test_image drawable in this case is a 16:9 image

@Composable
fun Sample() {
    Column(Modifier.fillMaxSize().verticalScroll(rememberScrollState())) {
        //Correct aspect ratio
        AsyncImage(
            modifier = Modifier.fillMaxWidth(),
            model = ImageRequest.Builder(LocalContext.current)
                .data("https://s3.amazonaws.com/www-inside-design/uploads/2020/10/aspect-ratios-blogpost-1x1-1.png")
                .placeholder(R.drawable.test_image)
                .crossfade(false)
                .build(),
            contentDescription = null,
            contentScale = ContentScale.FillWidth
        )

        Spacer(Modifier.height(16.dp))

        //Incorrect aspect ratio
        AsyncImage(
            modifier = Modifier.fillMaxWidth(),
            model = ImageRequest.Builder(LocalContext.current)
                .data("https://s3.amazonaws.com/www-inside-design/uploads/2020/10/aspect-ratios-blogpost-1x1-1.png")
                .placeholder(R.drawable.test_image)
                .crossfade(true)
                .build(),
            contentDescription = null,
            contentScale = ContentScale.FillWidth
        )
    }
}

Logs/Screenshots Screenshot_20221011-165830

Version Reproduced on both 2.0.0 and 2.2.2, using a Pixel 6 Pro on Android 13

Contributor guide