Image

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

Props

Name	Default	Description
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. This prop is required.
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	`false`	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).
src: string		URL of the image. This prop is required and must be valid.
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'	`'fill'`	Sets the `object-fit` CSS property. See MDN for further information.
objectPosition: string	`'50% 50%'`	Sets the `object-position` CSS property. See MDN for further information.
onLoad: ReactEventHandler		This function will be called when the image is loaded.
onError: ReactEventHandler		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