| Name | Type | Description | Default |
|---|---|---|---|
Required alt | 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. | - |
| height | string | Sets the rendered height of the image. | - |
| 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 |
| 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%' |
| onError | React.ReactEventHandler <HTMLImageElement> | This function will be called when the image fails to load. | - |
| onLoad | React.ReactEventHandler <HTMLImageElement> | This function will be called when the image is loaded. | - |
| 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. | - |
Required src | 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. | - |
| width | string | Sets the rendered width of the image. | - |
() => { return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcImage alt="Wooden dock on a lake" caption="Wooden dock on a beautifully landscaped lake." width="100%" src="https://images.unsplash.com/photo-1454372182658-c712e4c5a1db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2670&q=80" /> </DxcInset> ); }