Image

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

install	`yarn add @react-spectrum/image`
version	3.0.0
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 represents an image within a Spectrum container such as a Dialog. Image provides no specific styling by itself, but receives styling from the parent container. In addition, Image will be automatically placed within the container's layout according to Spectrum guidelines.

Note: Images must have an alt attribute. If the image is considered decorative and should not be announced by screen readers, then set alt="" to suppress the warning.

See Dialog for examples of how to use the Image component in the context of a Spectrum container.

Internationalization#

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

Props#

Name	Type	Default	Description
`src`	`string`	—	The URL of the image.
`alt`	`string`	—	Text description of the image.
`objectFit`	`any`	—	Sets the Image object-fit style.

Layout

Name	Type	Default	Description
`flex`	`string \| number \| boolean`	—	When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
`flexGrow`	`number`	—	When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
`flexShrink`	`number`	—	When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
`flexBasis`	`number \| string`	—	When used in a flex layout, specifies the initial main size of the element. See MDN.
`alignSelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'center' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'stretch'`	—	Overrides the `alignItems` property of a flex or grid container. See MDN.
`justifySelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'left' \| 'right' \| 'stretch'`	—	Specifies how the element is justified inside a flex or grid container. See MDN.
`order`	`number`	—	The layout order for the element within a flex or grid container. See MDN.
`gridArea`	`string`	—	When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
`gridColumn`	`string`	—	When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
`gridRow`	`string`	—	When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
`gridColumnStart`	`string`	—	When used in a grid layout, specifies the starting column to span within the grid. See MDN.
`gridColumnEnd`	`string`	—	When used in a grid layout, specifies the ending column to span within the grid. See MDN.
`gridRowStart`	`string`	—	When used in a grid layout, specifies the starting row to span within the grid. See MDN.
`gridRowEnd`	`string`	—	When used in a grid layout, specifies the ending row to span within the grid. See MDN.
`slot`	`string`	`'image'`	A slot to place the image in.

Spacing

Name	Type	Default	Description
`margin`	`DimensionValue`	—	The margin for all four sides of the element. See MDN.
`marginTop`	`DimensionValue`	—	The margin for the top side of the element. See MDN.
`marginBottom`	`DimensionValue`	—	The margin for the bottom side of the element. See MDN.
`marginStart`	`DimensionValue`	—	The margin for the logical start side of the element, depending on layout direction. See MDN.
`marginEnd`	`DimensionValue`	—	The margin for the logical end side of an element, depending on layout direction. See MDN.
`marginX`	`DimensionValue`	—	The margin for both the left and right sides of the element. See MDN.
`marginY`	`DimensionValue`	—	The margin for both the top and bottom sides of the element. See MDN.

Sizing

Name	Type	Default	Description
`width`	`DimensionValue`	—	The width of the element. See MDN.
`minWidth`	`DimensionValue`	—	The minimum width of the element. See MDN.
`maxWidth`	`DimensionValue`	—	The maximum width of the element. See MDN.
`height`	`DimensionValue`	—	The height of the element. See MDN.
`minHeight`	`DimensionValue`	—	The minimum height of the element. See MDN.
`maxHeight`	`DimensionValue`	—	The maximum height of the element. See MDN.

Positioning

Name	Type	Default	Description
`position`	`'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'`	—	Specifies how the element is positioned. See MDN.
`top`	`DimensionValue`	—	The top position for the element. See MDN.
`bottom`	`DimensionValue`	—	The bottom position for the element. See MDN.
`left`	`DimensionValue`	—	The left position for the element. See MDN. Consider using `start` instead for RTL support.
`right`	`DimensionValue`	—	The right position for the element. See MDN. Consider using `start` instead for RTL support.
`start`	`DimensionValue`	—	The logical start position for the element, depending on layout direction. See MDN.
`end`	`DimensionValue`	—	The logical end position for the element, depending on layout direction. See MDN.
`zIndex`	`number`	—	The stacking order for the element. See MDN.
`isHidden`	`boolean`	—	Hides the element.

Accessibility

Name	Type	Default	Description
`id`	`string`	—	The element's unique identifier. See MDN.

Advanced

Name	Type	Default	Description
`UNSAFE_className`	`string`	—	Sets the CSS className for the element. Only use as a last resort. Use style props instead.
`UNSAFE_style`	`CSSProperties`	—	Sets inline style for the element. Only use as a last resort. Use style props instead.

Visual options#

Decorative#

<Flex width="200px">
  <Image src="https://i.imgur.com/c3gTKSJ.jpg" alt="" />
</Flex>

<Flex width="200px">
  <Image src="https://i.imgur.com/c3gTKSJ.jpg" alt="" />
</Flex>

<Flex width="200px">
  <Image
    src="https://i.imgur.com/c3gTKSJ.jpg"
    alt=""
  />
</Flex>

Object Fit#

<Flex width="100%" height="200px">
  <Image
    src="https://i.imgur.com/c3gTKSJ.jpg"
    alt="Eiffel Tower at sunset"
    objectFit="cover"
  />
</Flex>

<Flex width="100%" height="200px">
  <Image
    src="https://i.imgur.com/c3gTKSJ.jpg"
    alt="Eiffel Tower at sunset"
    objectFit="cover"
  />
</Flex>

<Flex
  width="100%"
  height="200px">
  <Image
    src="https://i.imgur.com/c3gTKSJ.jpg"
    alt="Eiffel Tower at sunset"
    objectFit="cover"
  />
</Flex>

See the Styling docs for a visualization of these values.

'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