> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Image />

> An image loaded through Attio's privacy-preserving proxy.

```js theme={"system"}
import {Image} from "attio/client"
```

`Image` renders the provided source and handles the loading and failure states for you. The size of the image is set with the combination of the `size` and `aspectRatio` props.

Available on [pages](../pages/overview), [record tabs](../extensions/record-tab) and in [dialogs](../dialogs/show-dialog).

## Example

```tsx src/app/pages/listings/page.tsx theme={"system"}
import React from "react"
import {Extensions, Card, Image, Stack, Typography} from "attio/client"

export default Extensions.definePage({
  name: "Listings",
  Page: () => (
    <Card title="Featured listing">
      <Stack gap="medium">
        <Image
          src="https://example.com/listings/42/hero.jpg"
          alt="Front of the house at 42 Elm Street"
          size="fill"
        />
        <Stack direction="row" gap="small">
          <Image src="https://example.com/listings/42/kitchen.jpg" alt="Kitchen" size="small" />
          <Image src="https://example.com/listings/42/garden.jpg" alt="Garden" size="small" />
          <Image src={null} alt="Floor plan not available yet" size="small" />
        </Stack>
        <Typography.Body>3 bedrooms, 2 bathrooms, 140 m².</Typography.Body>
      </Stack>
    </Card>
  ),
})
```

## Sizing

* `small`, `medium` and `large` reserve a box up to 160px, 240px and 320px wide. A narrower container shrinks the box to fit.
* `fill` takes the full width of its container. As a direct child of a row [`Stack`](./stack), it takes the width left over after its siblings, so a `fill` image sits next to fixed-width content.
* `aspectRatio` sets the height from the width. Token sizes default to a square and `fill` defaults to `"16/9"`. Pass the content's real ratio when you know it, so the placeholder and the loaded image occupy the same space. Ratios are clamped between `"1/4"` and `"4/1"`; invalid values fall back to the default for the size.
* `fit` decides what happens when the content's ratio differs from the box: `"cover"` crops to fill the box and `"contain"` shows the whole image with empty space around it.

## Loading and failure

While the image loads, the box shows a shimmer. If the image fails to load, or `src` is `null`, the box shows a placeholder at the same size.

`src` must be an absolute `https://` URL. Any other value shows the placeholder and logs an error to the console.

## Props

<ParamField path="src" type="string | null" required>
  The HTTPS image source. Use `null` to show the placeholder.
</ParamField>

<ParamField path="alt" type="string" required>
  Accessible text describing the image. An empty string marks the image as decorative and hides it
  from assistive technology.
</ParamField>

<ParamField path="aspectRatio" type="`${number}/${number}` | number">
  The ratio of the reserved box as width over height, for example `"16/9"` or `1.5`. Clamped
  between `"1/4"` and `"4/1"`.

  Defaults to `1` for `'small'`, `'medium'` and `'large'`, and `"16/9"` for `'fill'`.
</ParamField>

<ParamField path="size" type="'small' | 'medium' | 'large' | 'fill'">
  The width of the box.

  * `'small'` - up to `160px`
  * `'medium'` - up to `240px`
  * `'large'` - up to `320px`
  * `'fill'` - the available width

  Defaults to `'medium'`.
</ParamField>

<ParamField path="fit" type="'cover' | 'contain'">
  Whether the content crops to fill the box or is contained within it.

  Defaults to `'cover'`.
</ParamField>