DEV Community


Posted on • Originally published at

Jetpack Compose Image Example

In this Jetpack compose example we cover how to load image in Jetpack compose. Jetpack compose provided Image() Composable to work with images in Compose.

ImageView is also commonly used to apply tints to an image and handle image scaling. But In Jetpack Compose there is no ImageView instead we simple have Image which is used to display Images. It is similar to an ImageView in the classic Android View system.

Jetpack compose image
Let's check Image properties

fun Image(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null

Enter fullscreen mode Exit fullscreen mode

Let's Load image into composable by below code

fun LoadFromResourceDemo(){
    val image: Painter = painterResource(id = R.drawable.image1)
    Image(painter = image,contentDescription = "image",)
Enter fullscreen mode Exit fullscreen mode

Read about How to load image from url in Jetpack compose

Discussion (0)