Image

The Image component is a wrapper for the native HTML <img> tag, with built-in styling for loading states.

Props

Prop	Type	Default	Description
`src`	`string`	`required`	The image source URL.
`alt`	`string`	`required`	Alternative text for the image.
`class`	`string`	`''`	CSS classes to apply to the image.
`overrideDefaultStyling`	`boolean`	`false`	If true, removes the base fluid-image class.
`...rest`	`HTMLImgAttributes`	`—`	Standard HTML <img> attributes.

Renders a standard image immediately without any artificial delay applied.

<Container class="h-48 w-full overflow-hidden rounded-lg">

  <Image

    src="https://picsum.photos/id/1018/500/300"

    alt="Nature scene"

    class="h-full w-full object-cover"

/>

</Container>

This example has a manual 3-second delay to showcase the skeleton effect.

<!-- The src is populated after a delay to demonstrate

     the built-in skeleton loading effect -->

<Image

  src={delayedSrc}

  alt="Delayed Image"

  class="h-full w-full object-cover!"

/>