Skip to main content
Image renders an <img> element with support for {{ field }} interpolation on both src and alt, making it easy to display user avatars, product images, or any dynamic media.

​
Basic Usage

Both width and height are CSS values (with units), applied as inline styles. The src and alt attributes support {{ field }} interpolation for dynamic content.

​
In Context

Images compose naturally with cards and other layout components:
Image in Card
from prefab_ui.components import (
    Card,
    CardContent,
    CardHeader,
    CardTitle,
    Image,
    P,
)

with Card():
    with CardHeader():
        CardTitle("{{ name }}")
    with CardContent():
        Image(src="{{ photo_url }}", alt="{{ name }}", width="100%")
        P("{{ bio }}")

​
API Reference

Image Parameters

​
src
str
required
Image URL.
​
alt
str
default:"\"\""
Alt text for accessibility.
​
width
str | None
default:"None"
CSS width value with units (e.g., "200px", "100%").
​
height
str | None
default:"None"
CSS height value with units.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Image
{
  "type": "Image",
  "src": "string (required)",
  "alt?": "string",
  "width?": "string",
  "height?": "string",
  "cssClass?": "string"
}
For the complete protocol schema, see Image.