@kit-ng-ui/image

Image component with fallback, lazy loading, click-to-preview, and group navigation. Mirrors ant-design's <Image> and <Image.PreviewGroup>.

Install

pnpm add @kit-ng-ui/image

@use '@kit-ng-ui/image/styles';

Example

<kit-image [src]="hero" alt="Hero" width="320" />

<kit-image-preview-group>
  <kit-image [src]="thumb1" />
  <kit-image [src]="thumb2" />
  <kit-image [src]="thumb3" />
</kit-image-preview-group>

API

<kit-image>

| Input | Type | Default | Description | | ------------ | -------------------------- | ----------- | ---------------------------------------- | | src | string | required | Image URL. | | alt | string | '' | Alt text. | | width | number \| string \| null | null | Box width. | | height | number \| string \| null | null | Box height. | | fallback | string \| null | null | Image URL to swap to on error. | | preview | boolean | true | Show the hover preview mask. | | lazy | boolean | true | Apply loading="lazy". | | placeholder| string \| null | null | Image shown until load resolves. |

<kit-image-preview-group>

Wraps multiple <kit-image>s to share a single overlay with prev/next nav, zoom and rotate controls. Keyboard: Esc closes, ←/→ switches.