# Image

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/runtime/NonRestartableComposable https://developer.android.com/reference/kotlin/androidx/compose/foundation/Image.composable#Image(androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter)( imageVector: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/vector/ImageVector, contentDescription: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment, contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale, alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, colorFilter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ColorFilter? )` A composable that lays out and draws a given `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/vector/ImageVector`. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/Image.composable#Image(androidx.compose.ui.graphics.painter.Painter,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter)( painter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter, contentDescription: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment, contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale, alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, colorFilter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ColorFilter? )` Creates a composable that lays out and draws a given `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter`. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/runtime/NonRestartableComposable https://developer.android.com/reference/kotlin/androidx/compose/foundation/Image.composable#Image(androidx.compose.ui.graphics.ImageBitmap,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.FilterQuality)( bitmap: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap, contentDescription: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment, contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale, alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, colorFilter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ColorFilter?, filterQuality: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/FilterQuality )` A composable that lays out and draws a given `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap`. | Cmn |

## Functions

### Image

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Image.kt+function:Image) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
@Composable
@NonRestartableComposable
fun Image(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
): Unit
```

A composable that lays out and draws a given `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/vector/ImageVector`. This will attempt to size the composable according to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/vector/ImageVector`'s given width and height. However, an optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter can be provided to adjust sizing or draw additional content (ex. background). Any unspecified dimension will leverage the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/vector/ImageVector`'s size as a minimum constraint.

| Parameters |
|---|---|
| `imageVector: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/vector/ImageVector` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/vector/ImageVector` to draw |
| `contentDescription: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?` | text used by accessibility services to describe what this image represents. This should always be provided unless this image is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using `androidx.compose.ui.res.stringResource` or similar |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier used to adjust the layout algorithm or draw decoration content (ex. background) |
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment = Alignment.Center` | Optional alignment parameter used to place the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/vector/ImageVector` in the given bounds defined by the width and height |
| `contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale = ContentScale.Fit` | Optional scale parameter used to determine the aspect ratio scaling to be used if the bounds are a different size from the intrinsic size of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/vector/ImageVector` |
| `alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = DefaultAlpha` | Optional opacity to be applied to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/vector/ImageVector` when it is rendered onscreen |
| `colorFilter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ColorFilter? = null` | Optional ColorFilter to apply for the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/vector/ImageVector` when it is rendered onscreen |

### Image

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Image.kt+function:Image) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

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

Creates a composable that lays out and draws a given `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter`. This will attempt to size the composable according to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter`'s intrinsic size. However, an optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter can be provided to adjust sizing or draw additional content (ex. background)

**NOTE** a Painter might not have an intrinsic size, so if no LayoutModifier is provided as part of the Modifier chain this might size the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Image.composable#Image(androidx.compose.ui.graphics.painter.Painter,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter)` composable to a width and height of zero and will not draw any content. This can happen for Painter implementations that always attempt to fill the bounds like `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/ColorPainter`

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Paint
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.unit.dp

val customPainter = remember {
    object : Painter() {

        override val intrinsicSize: Size
            get() = Size(100.0f, 100.0f)

        override fun DrawScope.onDraw() {
            drawRect(color = Color.Cyan)
        }
    }
}

Image(
    painter = customPainter,
    contentDescription = "Localized description",
    modifier = Modifier.size(100.dp, 100.dp),
)
```

| Parameters |
|---|---|
| `painter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` | to draw |
| `contentDescription: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?` | text used by accessibility services to describe what this image represents. This should always be provided unless this image is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using `androidx.compose.ui.res.stringResource` or similar |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier used to adjust the layout algorithm or draw decoration content (ex. background) |
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment = Alignment.Center` | Optional alignment parameter used to place the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` in the given bounds defined by the width and height. |
| `contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale = ContentScale.Fit` | Optional scale parameter used to determine the aspect ratio scaling to be used if the bounds are a different size from the intrinsic size of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` |
| `alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = DefaultAlpha` | Optional opacity to be applied to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` when it is rendered onscreen the default renders the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` completely opaque |
| `colorFilter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ColorFilter? = null` | Optional colorFilter to apply for the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` when it is rendered onscreen |

### Image

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Image.kt+function:Image) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.10.0)

```
@Composable
@NonRestartableComposable
fun Image(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null,
    filterQuality: FilterQuality = DefaultFilterQuality
): Unit
```

A composable that lays out and draws a given `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap`. This will attempt to size the composable according to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap`'s given width and height. However, an optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` parameter can be provided to adjust sizing or draw additional content (ex. background). Any unspecified dimension will leverage the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap`'s size as a minimum constraint.

The following sample shows basic usage of an Image composable to position and draw an `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap` on screen

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.ui.graphics.ImageBitmap

val ImageBitmap = createTestImage()
// Lays out and draws an image sized to the dimensions of the ImageBitmap
Image(bitmap = ImageBitmap, contentDescription = "Localized description")
```

For use cases that require drawing a rectangular subset of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap` consumers can use overload that consumes a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` parameter shown in this sample

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.Paint
import androidx.compose.ui.graphics.painter.BitmapPainter
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.IntSize

val ImageBitmap = createTestImage()
// Lays out and draws an image sized to the rectangular subsection of the ImageBitmap
Image(
    painter = BitmapPainter(ImageBitmap, IntOffset(10, 12), IntSize(50, 60)),
    contentDescription = "Localized description",
)
```

| Parameters |
|---|---|
| `bitmap: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap` to draw |
| `contentDescription: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?` | text used by accessibility services to describe what this image represents. This should always be provided unless this image is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using `androidx.compose.ui.res.stringResource` or similar |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier used to adjust the layout algorithm or draw decoration content (ex. background) |
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment = Alignment.Center` | Optional alignment parameter used to place the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap` in the given bounds defined by the width and height |
| `contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale = ContentScale.Fit` | Optional scale parameter used to determine the aspect ratio scaling to be used if the bounds are a different size from the intrinsic size of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap` |
| `alpha: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = DefaultAlpha` | Optional opacity to be applied to the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap` when it is rendered onscreen |
| `colorFilter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ColorFilter? = null` | Optional ColorFilter to apply for the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ImageBitmap` when it is rendered onscreen |
| `filterQuality: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/FilterQuality = DefaultFilterQuality` | Sampling algorithm applied to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#Image(androidx.compose.ui.graphics.ImageBitmap,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.FilterQuality)` when it is scaled and drawn into the destination. The default is `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/FilterQuality#Low()` which scales using a bilinear sampling algorithm |