Image

The Image component is used to embed images in Halstack-based user interfaces.

Props

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.	-
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 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.	-
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.	-

Examples

Basic usage

() => {
  return (
    <DxcInset space="2rem">
      <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>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <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>
  );
}

Props
Examples
- Basic usage

Edit this page on GitHub

Report an issue on GitHub

Heading

NextInset

Image

Props

Examples

Basic usage

Contents