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