Image

The Image component displays images from various sources including vector graphics, drawable resources, and network URLs. It supports different content scales, alignments, and loading states.

Usage

Vector Image

Image(
    modifier = Modifier.size(48.dp),
    imageVector = Icons.Default.Star,
    contentDescription = "Star icon"
)

Resource Image

Image(
    modifier = Modifier.size(64.dp),
    resource = Res.drawable.my_image,
    contentScale = ContentScale.Crop,
    contentDescription = "My image"
)

Network Image with Placeholder

Image(
    modifier = Modifier.size(80.dp),
    imageUrl = "https://example.com/image.jpg",
    placeholderRes = Res.drawable.placeholder,
    imageSize = ImageSize(200, 200),
    contentDescription = "Network image"
)

Circular Network Image

Image(
    modifier = Modifier.size(60.dp),
    imageUrl = "https://example.com/avatar.jpg",
    placeholderRes = Res.drawable.default_avatar,
    circleCrop = true,
    contentDescription = "User avatar"
)

Image with Color Filter

Image(
    modifier = Modifier.size(32.dp),
    imageVector = Icons.Default.Favorite,
    colorFilter = ColorFilter.tint(Color.Red),
    contentDescription = "Red heart"
)

Image with Different Content Scales

// Crop to fill
Image(
    modifier = Modifier.size(100.dp),
    resource = Res.drawable.photo,
    contentScale = ContentScale.Crop,
    contentDescription = "Cropped photo"
)

// Fit inside bounds
Image(
    modifier = Modifier.size(100.dp),
    resource = Res.drawable.photo,
    contentScale = ContentScale.Fit,
    contentDescription = "Fitted photo"
)