Image

Display an AI-generated image from base64 / Uint8Array bytes, or a regular URL via Angular's NgOptimizedImage. An hlm-skeleton holds the space until there is something to show.

Examples

From a URL

When you pass [src], the inner img uses NgOptimizedImage — Angular handles lazy-loading and priority hints.

<pk-image
  src="https://images.example.com/photo.jpg"
  alt="Sample landscape"
  [width]="320"
  [height]="320"
/>

From base64 (e.g. an LLM image generation)

Pass [base64] and [mediaType]; falls back to a native img tag because NgOptimizedImage does not accept data: URLs.

<pk-image
  [base64]="bytesFromLLM"
  mediaType="image/png"
  alt="Generated image"
/>

Loading placeholder

When neither src, base64, nor uint8Array is provided, an aria-labeled pulse box stands in.

<pk-image alt="Pending generation" />

Installation

Add the image component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:image

It is built on spartan/ui, so add these helm components too: skeleton.

ng g @spartan-ng/cli:ui skeleton

Component API

PkImage

Prop	Type	Default	Description
alt	`string`	—	Alt text (required).
src	`string`	—	Regular image URL — uses NgOptimizedImage. Width and height required.
base64	`string`	—	Base64 payload (renders as data: URL via plain img).
uint8Array	`Uint8Array`	—	Binary payload (rendered as a blob: URL, revoked on destroy).
mediaType	`string`	'image/png'	MIME type for base64 / blob payloads.
width	`number`	—	Required when src is set.
height	`number`	—	Required when src is set.
class	`string`	—	Extra classes for the img / placeholder.