Image
A lightweight wrapper around <img> that adds rounded corners and responsive fill behaviour. Use rounded for border-radius and responsive to make the image cover its container.
Playground
Usage
<!-- Default -->
<lt-image src="photo.jpg" alt="A scenic view"></lt-image>
<!-- Rounded — uses design system default radius -->
<lt-image src="photo.jpg" alt="A scenic view" rounded></lt-image>
<!-- Rounded with custom value (1–4 CSS values) -->
<lt-image src="photo.jpg" alt="A scenic view" rounded="50%"></lt-image>
<lt-image src="photo.jpg" alt="A scenic view" rounded="4px 16px"></lt-image>
<!-- Responsive — fills its container with object-fit: cover -->
<div style="width: 400px; height: 240px;">
<lt-image src="photo.jpg" alt="A scenic view" responsive rounded></lt-image>
</div>
<!-- Lazy loading + error fallback -->
<lt-image src="cover.jpg" alt="Album cover" loading="lazy">
<div slot="fallback">No cover available</div>
</lt-image>
import { Image } from '@latty-ds/react';
// Default
<Image src="photo.jpg" alt="A scenic view" />
// Rounded (default radius)
<Image src="photo.jpg" alt="A scenic view" rounded />
<Image src="photo.jpg" alt="A scenic view" rounded="50%" />
// Responsive fill
<div style={{ width: 400, height: 240 }}>
<Image src="photo.jpg" alt="A scenic view" responsive rounded />
</div>
// Lazy loading + error fallback (error also fires as onError)
<Image src="cover.jpg" alt="Album cover" loading="lazy">
<div slot="fallback">No cover available</div>
</Image>
<template>
<!-- Default -->
<lt-image src="photo.jpg" alt="A scenic view" />
<!-- Rounded -->
<lt-image src="photo.jpg" alt="A scenic view" rounded />
<lt-image src="photo.jpg" alt="A scenic view" rounded="50%" />
<!-- Responsive fill -->
<div style="width: 400px; height: 240px;">
<lt-image src="photo.jpg" alt="A scenic view" responsive rounded />
</div>
<!-- Lazy loading + error fallback -->
<lt-image src="cover.jpg" alt="Album cover" loading="lazy" @error="onCoverError">
<div slot="fallback">No cover available</div>
</lt-image>
</template>