Image Output

Component for rendering images in notebook outputs. Handles base64-encoded image data from Jupyter kernels as well as regular image URLs.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/image-output.json

Copy the component to your project from the registry source.

Usage

import { ImageOutput } from "@/registry/outputs/image-output"

export function Example() {
  // Base64 encoded image data from Jupyter kernel
  const imageData = "iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
  
  return (
    <ImageOutput 
      data={imageData} 
      mediaType="image/png"
      alt="Plot output"
    />
  )
}

Props

Prop	Type	Default	Description
`data`	`string`	—	Image data (base64 string, data URL, or regular URL)
`mediaType`	`"image/png" \| "image/jpeg" \| "image/gif" \| "image/webp"`	`"image/png"`	The MIME type of the image
`alt`	`string`	`"Output image"`	Alt text for accessibility
`width`	`number`	—	Optional width constraint
`height`	`number`	—	Optional height constraint
`className`	`string`	`""`	Additional CSS classes

Data Formats

The component accepts image data in several formats:

Format	Example
Base64 string	`"iVBORw0KGgoAAAANSUhEUgAAAAE..."`
Data URL	`"data:image/png;base64,iVBORw0..."`
HTTP URL	`"https://example.com/image.png"`
Relative path	`"/images/output.png"`

Jupyter Integration

When working with Jupyter outputs, image data typically comes from display_data or execute_result messages:

import { ImageOutput } from "@/registry/outputs/image-output"

function renderOutput(output: JupyterOutput) {
  const data = output.data;
  
  if (data["image/png"]) {
    return <ImageOutput data={data["image/png"]} mediaType="image/png" />
  }
  
  if (data["image/jpeg"]) {
    return <ImageOutput data={data["image/jpeg"]} mediaType="image/jpeg" />
  }
  
  return null;
}

Metadata

Jupyter outputs can include metadata specifying dimensions:

<ImageOutput
  data={imageData}
  mediaType="image/png"
  width={metadata.width}
  height={metadata.height}
/>