Image

The Image component is used to display images with support for fallback.

Installation

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

Import

Usage

Blurred

You can use the isBlurred prop to duplicate the image and blur it to create a blurred effect.

Zoomed

You can use the isZoomed prop make the image zoomed when hovered.

Animated (Skeleton) Loading

Image component has a built-in skeleton animation to indicate the image is loading in case the loadingSrc is not defined.

Note: The URL uses https://app.requestly.io/delay to simulate a slow network.

Custom Loading Image

You can use the loadingSrc prop to display a loading image when the image provided in src is still loading.

Note: The URL uses https://app.requestly.io/delay to simulate a slow network.

Image with fallback

You can use the fallbackSrc prop to display a fallback image when:

• The fallbackSrc prop is provided.
• The image provided in src fails to load.
• The image provided in src is not found.

Note: You can have both loadingSrc and fallbackSrc props to cover multiple possibilities while loading and handling image errors.

With Next.js Image

Next.js provides an optimized Image component, you can use it with HeroUI Image component as well.

Note: HeroUI's Image component is client-side, using hooks like useState for loading states and animations. Use Next.js Image alone if these features aren't required.

Slots

• img: Slot for the image element.
• wrapper: Image wrapper, it handles alignment, placement, and general appearance.
• zoomedWrapper: The wrapper slot for the zoomed image it avoids the image content to overflow the parent container.
• blurredImg: The wrapper slot for the duplicated blurred image.

API

Image Props

Image Events