Image

The Image component displays images from base64 or Uint8Array data, supporting all standard HTML image attributes. It is ideal for showing AI-generated images or user uploads in chat and AI apps. Compatible with AI SDK v5 architecture.

Features

Accepts base64 or Uint8Array image data
Supports all standard HTML image attributes
Responsive by default with max-w-full h-auto
Customizable with Tailwind classes
Fully accessible (alt required)

Examples

Basic Usage

Compact SVG chat icon

Installation

Copy and paste the following code into your project.

pnpm dlx shadcn-svelte@latest add https://ai-elements.vercel.app/r/prompt-kit-image.json

Component API

Image

Prop	Type	Default	Description
`base64`	`string`	-	Base64-encoded image data
`uint8Array`	`Uint8Array`	-	Raw image data as Uint8Array
`mediaType`	`string`	`'image/png'`	MIME type of the image (e.g., 'image/jpeg')
`alt`	`string`	-	Alternative text for accessibility (required)
`className`	`string`	-	Additional CSS classes
`...props`	`ImgHTMLAttributes<HTMLImageElement>`	-	All standard HTML <img> attributes