Skip to content
Mateu

Image

Displays an image from a URL or a Base64 data URI.

Basic usage

Section titled “Basic usage”
new Image("https://example.com/logo.png")

Properties

Section titled “Properties”
PropertyTypeDefaultDescription
srcString—Image URL or data:image/...;base64,... data URI
styleString""Inline CSS — use to control width, height, border-radius, etc.
cssClassesString""CSS class names

From a URL

Section titled “From a URL”
new Image("https://picsum.photos/200/300")

Sized via style

Section titled “Sized via style”
Image.builder()
    .src("https://example.com/product.jpg")
    .style("width: 200px; height: 150px; object-fit: cover;")
    .build()

Circular avatar-style image

Section titled “Circular avatar-style image”
Image.builder()
    .src("https://example.com/user.jpg")
    .style("width: 64px; height: 64px; border-radius: 50%;")
    .build()

Base64 data URI

Section titled “Base64 data URI”
Image.builder()
    .src("data:image/png;base64,iVBORw0KGgoAAAA...")
    .build()

Inside a Card as media

Section titled “Inside a Card as media”
Card.builder()
    .title(new Text("Product"))
    .media(new Image("https://example.com/product.jpg"))
    .variants(List.of(CardVariant.stretchMedia))
    .build()