Image

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

installyarn add @adobe/react-spectrum
added3.0.0
usageimport {Image} from '@adobe/react-spectrum'
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"
/>
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#

NameTypeDefaultDescription
srcstring—The URL of the image.
altstring—Text description of the image.
objectFitany—Sets the Image object-fit style.
Layout
NameTypeDefaultDescription
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.
slotstring'image'A slot to place the image in.
Spacing
NameTypeDefaultDescription
margin
<
>		—The margin for all four sides of the element. See MDN.
marginTop
<
>		—The margin for the top side of the element. See MDN.
marginBottom
<
>		—The margin for the bottom side of the element. See MDN.
marginStart
<
>		—The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEnd
<
>		—The margin for the logical end side of an element, depending on layout direction. See MDN.
marginX
<
>		—The margin for both the left and right sides of the element. See MDN.
marginY
<
>		—The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDefaultDescription
width
<
>		—The width of the element. See MDN.
minWidth
<
>		—The minimum width of the element. See MDN.
maxWidth
<
>		—The maximum width of the element. See MDN.
height
<
>		—The height of the element. See MDN.
minHeight
<
>		—The minimum height of the element. See MDN.
maxHeight
<
>		—The maximum height of the element. See MDN.
Positioning
NameTypeDefaultDescription
position
<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>		—Specifies how the element is positioned. See MDN.
top
<
>		—The top position for the element. See MDN.
bottom
<
>		—The bottom position for the element. See MDN.
left
<
>		—The left position for the element. See MDN. Consider using start instead for RTL support.
right
<
>		—The right position for the element. See MDN. Consider using start instead for RTL support.
start
<
>		—The logical start position for the element, depending on layout direction. See MDN.
end
<
>		—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
NameTypeDefaultDescription
idstring—The element's unique identifier. See MDN.
Advanced
NameTypeDefaultDescription
UNSAFE_classNamestring—Sets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSProperties—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>
Eiffel Tower at sunset