Image

Image is used to insert and display an image within a component.

install	`yarn add @react-spectrum/image`
version	3.0.0-alpha.1
usage	`import {Image} from '@react-spectrum/image'`

View repository

GitHub

View package

NPM

Examples#

<Image src="https://i.imgur.com/Z7AzH2c.png" alt="Sky and roof" />

<Image
  src="https://i.imgur.com/Z7AzH2c.png"
  alt="Sky and roof"
/>

<Image
  src="https://i.imgur.com/Z7AzH2c.png"
  alt="Sky and roof"
/>

Content#

The Image component is used to add images as a child to other components. Based on the component it is used within, it gets Spectrum styling and may have a preassigned slot for positioning. By virtue of its name, the Image component provides semantic meaning in the context they are placed. An example of this is the hero image in Dialog

See the MDN docs for more information.

Note: An image must either have the decorative prop or have the alt prop set.

Internationalization#

To internationalize an Image, a localized string should be passed to the alt prop.

Props#

Name	Type	Default	Description
`loaded`	`boolean`	—	Whether the Image should be displayed with a loaded style.
`isPlaceholder`	`boolean`	—	Whether the Image should be displayed with a placeholder style.
`objectFit`	`any`	—	Sets the Image object-fit style.
`src`	`string`	—	The URL of the image.
`decorative`	`boolean`	—	Whether the Image should be decorative and not have an `alt` property.
`alt`	`string`	—	Text description of the image.
`UNSAFE_className`	`string`	—
`UNSAFE_style`	`CSSProperties`	—

Layout

Name	Type	Default	Description
`flex`	`string \| number \| boolean`	—
`flexGrow`	`number`	—
`flexShrink`	`number`	—
`flexBasis`	`number \| string`	—
`alignSelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'stretch'`	—
`justifySelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'left' \| 'right' \| 'stretch'`	—
`flexOrder`	`number`	—
`gridArea`	`string`	—
`gridColumn`	`string`	—
`gridRow`	`string`	—
`gridColumnStart`	`string`	—
`gridColumnEnd`	`string`	—
`gridRowStart`	`string`	—
`gridRowEnd`	`string`	—
`slot`	`string`	`"image"`	A slot to place the image in.

Spacing

Name	Type	Default	Description
`margin`	`DimensionValue`	—
`marginTop`	`DimensionValue`	—
`marginLeft`	`DimensionValue`	—
`marginRight`	`DimensionValue`	—
`marginBottom`	`DimensionValue`	—
`marginStart`	`DimensionValue`	—
`marginEnd`	`DimensionValue`	—
`marginX`	`DimensionValue`	—
`marginY`	`DimensionValue`	—

Sizing

Name	Type	Default	Description
`width`	`DimensionValue`	—
`minWidth`	`DimensionValue`	—
`maxWidth`	`DimensionValue`	—
`height`	`DimensionValue`	—
`minHeight`	`DimensionValue`	—
`maxHeight`	`DimensionValue`	—

Positioning

Name	Type	Default	Description
`position`	`'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'`	—
`top`	`DimensionValue`	—
`bottom`	`DimensionValue`	—
`left`	`DimensionValue`	—
`right`	`DimensionValue`	—
`start`	`DimensionValue`	—
`end`	`DimensionValue`	—
`zIndex`	`number`	—
`isHidden`	`boolean`	—

Accessibility

Name	Type	Default	Description
`id`	`string`	—

Visual Options#

Decorative#

<Flex width="200px">
  <Image
    src="https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-15/e35/99120553_176571270346133_73156360171041206_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_cat=105&_nc_ohc=QqfjoiATImoAX9-GZ7A&oh=a2523e59f8af2de64755e6b2f4dff0af&oe=5EF06CC7"
    decorative
  />
</Flex>

<Flex width="200px">
  <Image
    src="https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-15/e35/99120553_176571270346133_73156360171041206_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_cat=105&_nc_ohc=QqfjoiATImoAX9-GZ7A&oh=a2523e59f8af2de64755e6b2f4dff0af&oe=5EF06CC7"
    decorative
  />
</Flex>

<Flex width="200px">
  <Image
    src="https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-15/e35/99120553_176571270346133_73156360171041206_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_cat=105&_nc_ohc=QqfjoiATImoAX9-GZ7A&oh=a2523e59f8af2de64755e6b2f4dff0af&oe=5EF06CC7"
    decorative
  />
</Flex>

Object Fit#

<Flex width="100%" height="200px">
  <Image
    src="https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-15/e35/99120553_176571270346133_73156360171041206_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_cat=105&_nc_ohc=QqfjoiATImoAX9-GZ7A&oh=a2523e59f8af2de64755e6b2f4dff0af&oe=5EF06CC7"
    alt="Illustration of grains"
    objectFit="cover"
  />
</Flex>

<Flex width="100%" height="200px">
  <Image
    src="https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-15/e35/99120553_176571270346133_73156360171041206_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_cat=105&_nc_ohc=QqfjoiATImoAX9-GZ7A&oh=a2523e59f8af2de64755e6b2f4dff0af&oe=5EF06CC7"
    alt="Illustration of grains"
    objectFit="cover"
  />
</Flex>

<Flex
  width="100%"
  height="200px">
  <Image
    src="https://scontent-sjc3-1.cdninstagram.com/v/t51.2885-15/e35/99120553_176571270346133_73156360171041206_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com&_nc_cat=105&_nc_ohc=QqfjoiATImoAX9-GZ7A&oh=a2523e59f8af2de64755e6b2f4dff0af&oe=5EF06CC7"
    alt="Illustration of grains"
    objectFit="cover"
  />
</Flex>

'size-0'
  | 'size-10'
  | 'size-25'
  | 'size-40'
  | 'size-50'
  | 'size-65'
  | 'size-75'
  | 'size-85'
  | 'size-100'
  | 'size-115'
  | 'size-125'
  | 'size-130'
  | 'size-150'
  | 'size-160'
  | 'size-175'
  | 'size-200'
  | 'size-225'
  | 'size-250'
  | 'size-300'
  | 'size-350'
  | 'size-400'
  | 'size-450'
  | 'size-500'
  | 'size-550'
  | 'size-600'
  | 'size-675'
  | 'size-700'
  | 'size-800'
  | 'size-900'
  | 'size-1000'
  | 'size-1200'
  | 'size-1250'
  | 'size-1600'
  | 'size-1700'
  | 'size-2000'
  | 'size-2400'
  | 'size-3000'
  | 'size-3400'
  | 'size-3600'
  | 'size-4600'
  | 'size-5000'
  | 'size-6000'
  | 'static-size-0'
  | 'static-size-10'
  | 'static-size-25'
  | 'static-size-50'
  | 'static-size-40'
  | 'static-size-65'
  | 'static-size-100'
  | 'static-size-115'
  | 'static-size-125'
  | 'static-size-150'
  | 'static-size-175'
  | 'static-size-200'
  | 'static-size-225'
  | 'static-size-250'
  | 'static-size-300'
  | 'static-size-400'
  | 'static-size-450'
  | 'static-size-500'
  | 'static-size-550'
  | 'static-size-600'
  | 'static-size-700'
  | 'static-size-800'
  | 'static-size-900'
  | 'static-size-1000'
  | 'static-size-1200'
  | 'static-size-1700'
  | 'static-size-2400'
  | 'static-size-2600'
  | 'static-size-3400'
  | 'static-size-3600'
  | 'static-size-4600'
  | 'static-size-5000'
  | 'static-size-6000'
  | 'single-line-height'
  | 'single-line-width'
  | string
  | number