<Image />

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, record tabs and in dialogs.

Example

src/app/pages/listings/page.tsx

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, 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

string | null

required

The HTTPS image source. Use null to show the placeholder.

string

required

Accessible text describing the image. An empty string marks the image as decorative and hides it from assistive technology.

`${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'.

'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'.

'cover' | 'contain'

Whether the content crops to fill the box or is contained within it.Defaults to 'cover'.

Introduction

Guides

Extensions

Pages

Workflow blocks

Notifications

Dialogs

Navigation

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Example

Sizing

Loading and failure

Props

​Example

​Sizing

​Loading and failure

​Props

Example

Sizing

Loading and failure

Props