Image

The Image component is used to display images.

import { Image } from '@nextui-org/react';

Default

The default Image acts as img component.

Size

Set the size of image by using the width & height props.

ShowSkeleton

Shows a skeleton while the image is loading.

Object-Fit

This property tells the content to fill the container in a variety of ways.

APIs

Image Props

AttributeTypeDescriptionDefault
srcstringImage source (local or remote)-
autoResizebooleanResize Image to fits screenfalse
showSkeletonbooleanShows loading Skeleton while image is loadingtrue
objectFitObjectFitProperty tells the content to fill the containerscale-down
widthstringSpecifies Image Width-
heightstringSpecifies Image Height-
maxDelaynumberSpecifies how long Image Skeleton Renders Animation3000
classNamestringGive Image A ClasName-
containerCssStitches.CSSOverride Default Image Contianer Style-
cssStitches.CSSOverride Default CSS style-
askeyof JSX.IntrinsicElementsChanges which tag component outputsimg
...ImageHTMLAttributesNative props-

Image types

Image object fit

type ObjectFit =
   | 'contain'
   | 'cover'
   | 'fill'
   | 'none'
   | 'scale-down'
   | 'inherit'
   | 'initial'
   | 'revert'
   | 'unset'
);
gradient blue backgroundgradient violet background