What's the best way to display images from URLs? I...

# compose

[robnik]

What's the best way to display images from URLs? I've got some code that's about 6 months old, that uses Picasso. I need to rewrite it because it's displaying "loading image" every time I scroll away and back.

[rsktash]

Use coil

[Colton Idle]

https://coil-kt.github.io/coil/compose/

[Colton Idle]

If you're doing multiplatform then maybe https://github.com/alialbaali/Kamel

[robnik]

It's a plain Android app. I'm trying to use it with an Accompanist HorizontalPager, so images fill the screen width. So far it's just creating a thin line, no image visible: Code:

HorizontalPager(state = pagerState, Modifier.fillMaxWidth()) { page ->
     if (page >= 0 && page < listing.images.size) {
         Image(painter = rememberImagePainter(listing.images[page]),
               contentDescription = null,
               contentScale = ContentScale.FillWidth,
               modifier = Modifier.fillMaxWidth()
         )

[Colton Idle]

Try setting a set height and width. Like size(100.dp)

If that works then it just means that you need to set a height.

[robnik]

Yes, that works, but I want it to match screen width, and height can be whatever, just keeping the aspect ratio.

[Colton Idle]

Set a width and use aspect ratio modifier

[Colton Idle]

FillMaxWidth().aspect ratio(16/9f)

[robnik]

But I want it to use the aspect ratio of the image.

[Colton Idle]

You won't know aspect ratio of the image until it's downloaded. And if you do that then your layouts will assuredly jump.

[robnik]

I might prefer that to having a mushed image.

[Colton Idle]

Don't have a mushed image. Just set a crop type of center

[Colton Idle]

Content scale = crop

[robnik]

Thank you. I went with Fit, to not loose edges of the image, but same idea. Maybe I can figure out how to adjust it based on the loaded image, but this will work for now.

[Colton Idle]

Based on image will result in layout shift. https://twitter.com/addyosmani/status/1334029534123868160?s=19

[Colton Idle]

You can use a set aspect ratio if your images from the web are using a set aspect ratio too.

[robnik]

In my case I'm loading a lot of images of products provided by 3rd parties. I don't know the exact dimensions or aspect ratios beforehand.

[Colton Idle]

Exactly why a set aspect ratio on the client side with a center crop is the way to go.