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]"
/>