Img

Img renders a styled <figure> with an <img> element, optional <figcaption>, fallback placeholder, and loading skeleton.

Basic Usage

import { Img } from "@paramanu/data-display-react"

export default function App() {
return <Img src="https://picsum.photos/400/300" alt="Sample" />
}

<figure class="pm-img pm-img--cover pm-img--radius-none">
<img class="pm-img__img" src="https://picsum.photos/400/300" alt="Sample" />
</figure>

Prop	Type	Default	Description
`fit`	`"cover" \| "contain" \| "fill" \| "none" \| "scale-down"`	`"cover"`	Object-fit value
`radius`	`"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"`	`"none"`	Border radius
`fallback`	`boolean`	`false`	Show fallback placeholder
`loading`	`boolean`	`false`	Show loading skeleton
`src`	`string`	-	Img source URL
`alt`	`string`	-	Alt text
`caption`	`string`	-	Caption text