Image

kai-image

Display a model-generated or in-memory image directly from a base64 string or raw byte array — no CDN upload, no hosted URL needed.

• Shadow DOM
• Base64 or Uint8Array input
• Skeleton while resolving
• SVG / PNG / JPEG / any MIME type
• Alt text for accessibility

Preview

When to use

Use <kai-image> when you receive raw image data from a model or API response and need to display it inline — inside a message bubble, a card body, or an artifact preview — without uploading first. The element is display: inline-block and fills its container width; constrain width on the parent as needed.

Usage

Assign either base64 (paired with media-type) or bytes as a property:

<kai-image id="img" media-type="image/png" alt="A generated chart"></kai-image>

<script type="module">
  import '@kitn.ai/ui/elements';

  const img = document.getElementById('img');

  // base64 string:
  img.base64 = '<...base64 encoded image data...>';

  // or raw bytes:
  // img.bytes = new Uint8Array([...]);
</script>

• base64 — scalar attribute or property; pair with media-type so the browser decodes correctly.
• bytes — assign it in JavaScript (Uint8Array); media-type is recommended but not required when the format is detectable.
• media-type defaults to image/png. Override for SVG (image/svg+xml), JPEG, or any other MIME type.
• alt defaults to an empty string — always provide meaningful alt text.

Examples

Purple Star

A base64-encoded SVG with explicit media-type and descriptive alt text.

Code

Teal Circle

A different base64 SVG — swap base64 and media-type for each image you display.

Code

With Descriptive Alt Text

Pairs the image with a specific alt string so screen readers announce it correctly.

Code

Props

Property	Type	Default	Notes
base64	string	—	Base64-encoded image data (pair with `media-type`).
bytes	Uint8Array<ArrayBufferLike>	—	Raw image bytes (set as a JS property).
alt	string	''	Alt text.
mediaType	string	—	MIME type (default `image/png`).

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Image

---

Need a hand? Report a bug Ask for help