Components / Image
Image
Image with lazy loading, aspect ratio control, skeleton placeholder, and error fallback.
data-displayv0.1.0
Playground
Examples
Basic
<cg-image src="https://picsum.photos/400/200" alt="Sample image" ratio="16:9" style="max-width: 400px;"></cg-image>Import
import { CgImage } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-image';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL |
alt | string | — | Alt text |
ratio | "1:1" | "3:2" | "4:3" | "16:9" | "21:9" | "auto" | "auto" | Aspect ratio |
fit | "cover" | "contain" | "fill" | "cover" | Object fit |
lazy | boolean | true | Lazy loading |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Border radius variant |