image

image displays an image from a data container, application resource, URL, or programmatic source.

XML Element

image

Java Class

JmixImage

Basics

LIVE DEMO

Set the resource attribute to display an image available to the application:

<image resource="icons/jmix-icon.png" height="10em" width="10em"/>

Data-aware image

LIVE DEMO

Set dataContainer and property to display a FileRef or byte[] entity attribute. The example binds both the upload field and image to the content property, so a newly uploaded value is displayed immediately:

<data>
    <instance id="pictureDc"
              class="io.jmix.uisamples.entity.Picture"
              fetchPlan="_local"/>
</data>
<layout>
    <fileUploadField label="Load new image" dataContainer="pictureDc" property="content"
                     clearButtonVisible="true" fileNameVisible="true" acceptedFileTypes=".png"/>
    <image id="numberField" height="10em" width="10em"
           alternateText="No picture loaded"
           dataContainer="pictureDc" property="content"/>
</layout>

URL and Programmatic Sources

LIVE DEMO

Set resource to an external URL. For a source created at runtime, call setSrc() with a DownloadHandler. The example shows both approaches.

Static web resources normally reside under /static, /public, /resources, or /META-INF/resources on the classpath. See Static Public Resources when they must be available without authentication.

XML
<layout justifyContent="BETWEEN" classNames="horizontal-layout">
    <vbox padding="false" width="AUTO" alignItems="CENTER">
        <h4 text="URL resource"/>
        <image resource="https://www.jmix.io/uploads/framework_image_9efadbc372.svg"
               height="15em" width="15em"/>
    </vbox>
    <vbox padding="false" width="AUTO" alignItems="CENTER">
        <h4 text="Programmatic resource"/>
        <image id="imageProgrammaticResource"
               height="15em" width="15em"/>
    </vbox>
</layout>
Java
protected static final String SRC_PATH = "/META-INF/resources/icons/image-sample.svg";

@ViewComponent
protected JmixImage<?> imageProgrammaticResource;

@Subscribe
protected void onInit(InitEvent event) {
    imageProgrammaticResource.setSrc(DownloadHandler.forClassResource(getClass(), SRC_PATH));
}

Theme Variants

LIVE DEMO

Use themeNames to control how an image fits within its dimensions.

Variant Description Supported By

fill

Stretches the image to fill both dimensions.

Aura, Lumo

contain

Scales the image to fit without cropping.

Aura, Lumo

cover

Scales and crops the image to cover its area.

Aura, Lumo

scale-down

Uses the smaller result of the natural size and contain sizing.

Aura, Lumo

Attributes

Common attributes serve the same purpose for all components. The following attributes are specific to image:

Name Description Default

alternateText

Provides accessible alternative text and fallback text when the image cannot be loaded.

—

resource

Specifies the location of the image. See URL and Programmatic Sources.

—

themeNames

Applies one or more variants listed in Theme Variants.

—

Handlers

Common handlers are configured in the same way for all components. The following handlers are specific to image:

Name Description

ClickEvent

Fires when the image is clicked. Use the click, singleClick, or doubleClick subject to select the click pattern.