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" / >
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.
To internationalize an Image, a localized string should be passed to the alt prop.
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 —
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.
Name Type Default Description id string —
< 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 = "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