| Name | Type | Description | Default |
|---|---|---|---|
Required | string | Alternative text description displayed when the specified image is not loaded. See MDN and the alt decision tree of W3C for further information. | - |
| caption | string | Image legend with a descriptive purpose. It is placed below the image and is complementary to the alt attribute, which is required regardless of the presence of the caption or not. | - |
| lazyLoading | boolean | If true, the image will be loaded only when it is visible on the screen (lazy loading). Otherwise and by default, the image will be loaded as soon as the component is mounted (eager loading). | false |
Required | string | URL of the image. | - |
| srcSet | string | List of one or more strings separated by commas indicating a set of possible images for the user agent to use. See MDN for further information. | - |
| sizes | string | One or more strings separated by commas, indicating a set of source sizes. If the srcSet attribute is absent or contains no values with a width descriptor, then this attribute has no effect. See MDN for further information. | - |
| width | string | Sets the rendered width of the image. | - |
| height | string | Sets the rendered height of the image. | - |
| objectFit | 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | Sets the object-fit CSS property. See MDN for further information. | 'fill' |
| objectPosition | string | Sets the object-position CSS property. See MDN for further information. | '50% 50%' |
| onLoad | React.ReactEventHandler <HTMLImageElement> | This function will be called when the image is loaded. | - |
| onError | React.ReactEventHandler <HTMLImageElement> | This function will be called when the image fails to load. | - |
Halstack
Design System
next
Utilities
Halstack Provider
Components
Accordion
Alert
Application Layout
Badge
Experimental
Bleed
Box
Deprecated
Breadcrumbs
Experimental
Bulleted List
Button
Card
Checkbox
Chip
Container
Experimental
Contextual Menu
Experimental
Date Input
Dialog
Divider
Experimental
Dropdown
File Input
Flex
Footer
Grid
Header
Heading
Image
Experimental
Inset
Link
Nav Tabs
Number Input
Paginator
Paragraph
Password Input
Progress Bar
Quick Nav
Radio Group
Resultset Table
Select
Sidenav
Slider
Spinner
Status Light
Experimental
Switch
Table
Tabs
Tag
Text Input
Textarea
Toggle Group
Typography
Wizard