Loading images

Load an image from the disk

Use the Image composable to display a graphic on screen. To load an image (for example: PNG, JPEG, WEBP) or vector resource from the disk, use the painterResource API with your image reference. You don't need to know the type of the asset, just use painterResource in Image or paint modifiers.

DrawScope:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)LoadingImagesSnippets.kt

To ensure that your app is accessible, supply a contentDescription for visual elements on screen. TalkBack reads out the content description, so you must ensure that the text is meaningful if read out loud and translated. In the above example, a stringResource() is used to load up the translated content description from the strings.xml file. If your visual element on screen is purely for visual decoration, set your contentDescription to null for the screen reader to ignore it.

If you need lower-level ImageBitmap specific functionality, you can use ImageBitmap.imageResource() to load up a Bitmap. For more information on ImageBitmaps, read the ImageBitmap versus ImageVector section.

Drawable support

painterResource currently supports the following drawable types:

Load an image from the internet

To load an image from the internet, there are several third-party libraries available to help you handle the process. Image loading libraries do a lot of the heavy lifting for you; they handle both caching (so you don't download the image multiple times) and networking logic to download the image and display it on screen.

For example, to load an image with Coil from Instacart, add the library to your gradle file, and use an AsyncImage to load an image from a URL:

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)LoadingImagesSnippets.kt