image 图片

image 支持显示数据容器、应用程序资源、URL 或编程式提供的图片源。

XML 元素

image

Java 类

JmixImage

基本用法

在线示例

设置 resource 属性可以显示应用程序中的图片：

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

数据感知的 image

在线示例

使用 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 height="10em" width="10em"
           alternateText="No picture loaded"
           dataContainer="pictureDc" property="content"/>
</layout>

URL 和编程式资源

在线示例

外部图片 URL 可以在 resource 属性设置。对于运行时创建的资源，可以使用 DownloadHandler 并调用 setSrc() 方法。下面的示例演示了这两种方式。

静态网络资源一般放在 classpath 的 /static、/public、/resources 或 /META-INF/resources 中。如果需要匿名访问这些资源，请参考 静态公共资源。

XML
<layout justifyContent="BETWEEN" classNames="horizontal-layout">
    <vbox padding="false" width="AUTO" alignItems="CENTER">
        <h4 text="URL resource"/>
        <image resource="https://demo.jmix.io/ui-samples/icons/image-sample.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

XML 属性

通用属性 对所有组件都是一样的配置。 下面是 image 的特殊属性：

名称 描述 默认值

alternateText

设置图片的替代文本。如果图片资源未设置或不可用。

—

resource

设置图片的资源位置。参阅 URL 和编程式资源。

—

themeNames

使用 样式版本 中列出的一个或多个样式。

—

事件和处理器

通用事件和处理器 对所有组件都是一样的配置。 下面是 image 的特殊事件和处理器：

名称 描述

ClickEvent

当用户点击图片时触发。使用 click、singleClick 或 doubleClick 选择点击模式。