Image

A lazy image with placeholder and error state.

import { BuiImage } from 'ng-blatui';

<bui-image src="/photo.jpg" alt="A scenic view" />

With ratio

<bui-image src="/photo.jpg" alt="" ratio="16/9" />

<!-- blur-up from a tiny placeholder -->
<bui-image src="/full.jpg" placeholder="/tiny.jpg" alt="" ratio="16/9" />

<!-- shows a fallback when the src fails to load -->
<bui-image src="/missing.jpg" alt="" ratio="16/9" />

Prop	Type	Default	Description
`src`	`string`	`''`	Source URL of the full image to load.
`alt`	`string`	`''`	Alternative text for the image.
`ratio`	`string`	`''`	CSS `aspect-ratio` reserved for the image (e.g. `16 / 9`).
`placeholder`	`string`	`''`	URL of a low-res image shown blurred while the full image loads.
`rounded`	`string`	`'rounded-lg'`	Tailwind class controlling corner rounding.
`fit`	`"contain" \| "cover"`	`'cover'`	How the image fills its box: `cover` crops, `contain` letterboxes.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.