image
image is designed to display images from different sources. The component can be bound to a data container or configured programmatically.
-
XML element:
image -
Java class:
JmixImage
Basics
An image can be represented as an entity attribute of FileRef or byte[] type. In the example below, the picture attribute of the User entity is a reference to a file in file storage:
@JmixEntity
@Entity
@Table(name = "USER_", indexes = {
@Index(name = "IDX_USER__ON_USERNAME", columnList = "USERNAME", unique = true),
@Index(name = "IDX_USER__DEPARTMENT", columnList = "DEPARTMENT_ID")
})
public class User implements JmixUserDetails, HasTimeZone {
/* other attributes */
@Column(name = "PICTURE", length = 1024)
private FileRef picture;
}To display the image provided by this attribute, specify it in the component. For that, specify the data container and property attributes.
<data readOnly="true">
<instance id="userDc" class="com.company.onboarding.entity.User" >
<fetchPlan extends="_base"/>
<loader id="userDl">
<query>
<![CDATA[select u from User u where u.username = 'bob']]>
</query>
</loader>
</instance>
</data>
<facets>
<dataLoadCoordinator auto="true"/>
</facets>
<layout>
<image id="fileRefImage"
dataContainer="userDc"
property="picture"/>
</layout>Resources
Alternatively, the image component can display images from different resources. You can set the resource type declaratively using the nested XML elements described below, or programmatically using the setSrc() method.
Static Resource
An image can be served statically by the application.
By default, static content is served from /static, /public, /resources, or /META-INF/resources directories of the classpath (see details in the Spring Boot documentation).
-
In XML:
For example, if your image is located under
/src/main/resources/META-INF/resources, such as/src/main/resources/META-INF/resources/icons/icon.png, you can specify the resource as follows:<image id="staticImage" resource="icons/icon.png"/> -
In Java:
image.setSrc("icons/icon.png");
Attributes
id - alignSelf - alternateText - ariaLabel - classNames - colspan - dataContainer - enabled - height - maxHeight - maxWidth - minHeight - minWidth - property - resource - text - themeNames - title - visible - whiteSpace - width
ariaLabel
Sets a separate, visually hidden label for accessibility technologies, such as screen readers.