image

image отображает изображение из контейнера данных, ресурса приложения, URL или программно заданного источника.

XML-элемент

image

Java-класс

JmixImage

Основы

ДЕМО

Чтобы отобразить доступное приложению изображение, задайте атрибут resource:

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

Привязка к данным

ДЕМО

Задайте dataContainer и property, чтобы отображать атрибут сущности типа FileRef или byte[]. В примере поле загрузки и image привязаны к атрибуту content, поэтому новое загруженное значение отображается сразу:

<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 и программные источники

ДЕМО

Чтобы использовать внешний URL, задайте его в resource. Для источника, созданного во время выполнения, вызовите setSrc() с DownloadHandler. В примере показаны оба подхода.

Статические веб-ресурсы обычно находятся в каталогах /static, /public, /resources или /META-INF/resources в classpath. Если они должны быть доступны без аутентификации, см. Статические общедоступные ресурсы.

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));
}

Варианты темы

ДЕМО

Используйте themeNames, чтобы настроить размещение изображения в заданных размерах.

Вариант Описание Поддерживается в

fill

Растягивает изображение по ширине и высоте.

Aura, Lumo

contain

Масштабирует изображение без обрезки, чтобы оно полностью поместилось в области.

Aura, Lumo

cover

Масштабирует и обрезает изображение, чтобы заполнить всю область.

Aura, Lumo

scale-down

Выбирает меньший размер из исходного и полученного при варианте contain.

Aura, Lumo

Атрибуты

В Jmix существует множество общих атрибутов, которые служат одной цели для всех компонентов. Следующие атрибуты относятся только к image:

Имя Описание По умолчанию

alternateText

Задаёт доступный альтернативный текст, который также отображается, если изображение не загрузилось.

—

resource

Задаёт расположение изображения. См. URL и программные источники.

—

themeNames

Применяет один или несколько вариантов из раздела Варианты темы.

—

Обработчики

В Jmix существует множество общих обработчиков, которые настраиваются одинаково для всех компонентов. Следующие обработчики специфичны для image:

Имя Описание

ClickEvent

Срабатывает при нажатии на изображение. Используйте subject click, singleClick или doubleClick, чтобы выбрать тип нажатия.