SushiImage¶

A composable component that displays images in the Sushi design system.

SushiImage provides a consistent way to display images with various customization options like shapes, sizing, scaling, filters, and more. It supports both fixed dimensions and aspect ratio-based sizing, as well as click interactions.

The component intelligently handles different combinations of width, height, and aspect ratio:

If width and height are provided, both are applied
If width and aspect ratio are provided, height is calculated automatically
If height and aspect ratio are provided, width is calculated automatically

Example¶

The SushiImage component is used to display images with various customization options.

// Basic image from resource
SushiImage(
    props = SushiImageProps(
        painter = painterResource(id = R.drawable.food_image),
        width = 200.dp,
        height = 150.dp,
        contentDescription = "Food image",
        shape = RoundedCornerShape(8.dp),
        contentScale = ContentScale.Crop
    ),
    modifier = Modifier.padding(8.dp)
)

// Network image with aspect ratio
val foodImagePainter = rememberAsyncImagePainter(
    model = "https://example.com/food.jpg"
)

SushiImage(
    props = SushiImageProps(
        painter = foodImagePainter,
        aspectRatio = 16f/9f,
        contentScale = ContentScale.Crop,
        shape = RoundedCornerShape(12.dp),
        contentDescription = "Food image with aspect ratio"
    ),
    modifier = Modifier.fillMaxWidth()
)

Component API¶

SushiImage¶

Parameter	Description
`painter`	The painter responsible for drawing the image content
`bgColor`	The background color behind the image
`aspectRatio`	The width to height ratio to maintain (e.g., 16/9 = 1.78)
`height`	The explicit height for the image (optional)
`width`	The explicit width for the image (optional)
`shape`	The shape to clip the image to (e.g., RoundedCornerShape)
`contentDescription`	Accessibility description of the image for screen readers
`contentScale`	How the image should be scaled within its bounds (e.g., Fit, Crop)
`alpha`	Opacity level from 0.0 (transparent) to 1.0 (opaque)
`scaleFactor`	Additional scaling factor applied to the image size
`alignment`	How the image should be aligned within its bounds
`colorFilter`	Optional filter to apply color transformations to the image