How to load Image Files into Jetpack Compose Image using Coil

Question

I want to load a local image file using Coil into a Jetpack Compose Image, but searching has produced only methods using web urls or by passing files converted to bitmaps.

Can Coil load a local image file directly into a Compose Image?

Kamakura

Where are stored these files? – Burrows

@Gabriele Mariotti on cache folder – Kamakura

Answer 1

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

Muscolo

Answer 2

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

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

Burrows

shouldn't you save the cacheFile via remember? – Iberia

Currently it is deprecated in coil. – Languet

Answer 3

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)

Kingcraft