Image Image is used to insert and display an image within a component.
< 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"
/ >
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.
To internationalize an Image, a localized string should be passed to the alt prop.
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.
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.
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 .
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.
Name Type Default Description id string — The element's unique identifier. See MDN .
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.
< 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 >
< 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 >