Documentation
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
| Attribute | Type | Description | Default |
|---|---|---|---|
| src | string | Image source (local or remote) | - |
| autoResize | boolean | Resize Image to fits screen | false |
| showSkeleton | boolean | Shows loading Skeleton while image is loading | true |
| objectFit | ObjectFit | Property tells the content to fill the container | scale-down |
| width | string | Specifies Image Width | - |
| height | string | Specifies Image Height | - |
| maxDelay | number | Specifies how long Image Skeleton Renders Animation | 3000 |
| className | string | Give Image A ClassName | - |
| containerCss | Stitches.CSS | Override Default Image Container Style | - |
| css | Stitches.CSS | Override Default CSS style | - |
| as | keyof JSX.IntrinsicElements | Changes which tag component outputs | img |
| ... | ImageHTMLAttributes | Native props | - |
Image types
Image object fit
type ObjectFit = | 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | 'inherit' | 'initial' | 'revert' | 'unset' );
