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 Loading

Image component has a built-in skeleton animation to indicate the image is loading and an opacity animation when the image loads.

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 is still loading.
• The image provided in src fails to load.
• The image provided in src is not found.

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