Components

Image

A smart image with a skeleton, blur-up fade-in and a graceful error fallback.

php artisan blatui:add image

A river winding through a rocky mountain valley

<x-ui.image
    src="https://picsum.photos/id/1015/600/400"
    alt="A river winding through a rocky mountain valley"
    class="w-[300px]"
/>

Fallback

Quarterly revenue chart

<x-ui.image
    src="https://picsum.photos/this-image-does-not-exist.jpg"
    alt="Quarterly revenue chart"
    ratio="16/9"
    class="w-[400px]"
/>

Placeholder

A mountain lake reflecting a clear blue sky

<x-ui.image
    src="https://picsum.photos/id/1018/800/450"
    placeholder="https://picsum.photos/id/1018/20/11"
    alt="A mountain lake reflecting a clear blue sky"
    ratio="16/9"
    class="w-[400px]"
/>

With Ratio

A misty forest seen from a mountain ridge

<x-ui.image
    src="https://picsum.photos/id/1016/800/450"
    alt="A misty forest seen from a mountain ridge"
    ratio="16/9"
    class="w-[400px]"
/>

API Reference

Props, slots and exposed methods for <x-ui.image>.

Props

Prop	Type	Default	Description
`src`*	`string`	—	URL of the image to display. The image lazy-loads and fades in once decoded.
`alt`	`string`	`''`	Alternative text for the image. Also shown as a label inside the error fallback when loading fails.
`ratio`	`string`	—	A CSS aspect-ratio value (e.g. "16/9" or "1/1") applied to the frame so it reserves space before the image loads. Leave unset to size by the image itself.
`placeholder`	`string`	—	URL of a tiny low-resolution image shown blurred while the full image loads. When omitted, an animated skeleton box is used instead.
`rounded`	`string`	`'rounded-lg'`	Tailwind corner-rounding utility for the frame. Pass another rounding class to override, or rounded-none for square corners.
`fit`	`string`	`'cover'`	How the image fills the frame. cover crops to fill; contain fits the whole image inside, leaving padding if the ratios differ. `cover` `contain`

* Required.