Image

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


Installation

npx nextui-cli@latest add image
The above command is for individual installation only. You may skip this step if @nextui-org/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 NextUI Image component as well.

Note: NextUI'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

AttributeTypeDescriptionDefault
srcstringThe image source.-
srcSetstringThe image srcSet.-
sizesstringThe image sizes.-
altstringThe image alt.-
widthnumberThe image width.-
heightnumberThe image height.-
radiusnone | sm | md | lg | fullThe image border radius.xl
shadownone | sm | md | lgThe image shadow.none
loadingeager | lazyA loading strategy to use for the image.-
fallbackSrcstringThe fallback image source.-
isBlurredbooleanWhether the image should have a duplicated blurred image at the background.false
isZoomedbooleanWhether the image should be zoomed when hovered.false
removeWrapperbooleanWhether to remove the wrapper element. This will cause the image to be rendered as a direct child of the parent element. If you set this prop as true neither the skeleton nor the zoom effect will work.false
disableSkeletonbooleanWhether the image should disable the skeleton animation while loading.false
classNamesRecord<"img"| "wrapper"| "zoomedWrapper"| "blurredImg", string>Allows to set custom class names for the image slots.-

Image Events

AttributeTypeDescription
onLoadReactEventHandler<HTMLImageElement>Handler that is called when the image load.
onError() => voidHandler that is called when the image fails to load.