How to load Image Files into Jetpack Compose Image using Coil

Question

I would like to load saved image on cache into Image of Jetpack Compose using Coil. I searched in stackoverflow but all suggested ways are for loading web urls. I know that It's possible to convert image file to bitmap and then pass it to Coil but is there any builtin solution for it?

Where are stored these files? – Gabriele Mariotti Sep 13 '21 at 08:45 — Gabriele Mariotti, Sep 13 '21 at 08:45
@Gabriele Mariotti on cache folder – Vahid Sep 13 '21 at 08:48 — Vahid, Sep 13 '21 at 08:48

score 8 · Answer 1 · answered Sep 13 '21 at 09:05

8

You can use Coil to load any object as a data:

val cacheFile = File(context.cacheDir, "filename")
Image(
    rememberImagePainter(cacheFile),
    contentDescription = "...",
)

answered Sep 13 '21 at 09:05

Gabriele Mariotti

320,139
94
887
841

1

shouldn't you save the `cacheFile` via `remember`? – Jim Ovejera Feb 16 '22 at 13:55

score 7 · Accepted Answer · answered Dec 27 '22 at 18:06

For the new version of coil 2.2.2, rememberImagePainter didn't give me good results so I used this-

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data(<file_path>)
        .build(),
    contentDescription = "icon",
    contentScale = ContentScale.Inside,
    modifier = Modifier.size(30.dp)
)

Hope it helps someone

Murodjon Abdukholikov · Answer 3 · 2021-09-15T04:47:08.487

4

If you've a locally saved image path, you can try the following method,

val painter = rememberImagePainter(data = File(filePath))
Image(
    painter = painter,
    contentDescription = null)

and to load image from remote url,

val painter = rememberImagePainter(data = imageUrl)
Image(
    painter = painter,
    contentDescription = null)

edited Sep 15 '21 at 04:47

answered Sep 15 '21 at 04:39

Murodjon Abdukholikov

417
5
18

How to load Image Files into Jetpack Compose Image using Coil

3 Answers3