Image | X4Documentation

<Image> controls are used to embed graphics.

Attribute	Description
`iconColor`	Defines the color of the icon. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash in front of the color value or a shortened notation of the color value! Color code from the color palette of the Web App (see Theming), e.g. `A200`
`value`	Image that is displayed. Refers to a property (`Base64` or `Image`) within the component. Needed to dynamically display images. Possible values: File system path to the graphic file or data binding expression (Image, Base64, String, URL) If an internal graphic file is used, the graphic file must be contained in the folder `Resources` directly below the Web App project. If the image is accessed via an external URL, then the attribute `type="external"` must be set for the input.
`background`	Defines a color for the background of the control. This setting overwrites the default color of the color scheme! This attribute doesn't work with the `Maps` and `HtmlDocument` controls! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash in front of the color value! Do not use a shortened notation of the color value! Color code from the color palette of the Web App (see Theming), e.g. `A200`
`border`	Defines if the control has a border. Possible values: `true` / `false`
`border-left`	Defines whether a left border is displayed Possible values: `true` / `false`
`border-right`	Defines whether a right border is displayed Possible values: `true` / `false`
`border-top`	Defines whether a top border is displayed Possible values: `true` / `false`
`border-bottom`	Defines whether a bottom border is displayed Possible values: `true` / `false`
`enabled`	Defines whether the user can interact with the control. Data binding (Boolean) possible Possible values: `true`/`false` or data binding expression The `enabled` attribute replaces the deprecated `disabled` attribute. `disabled`. `enabled="true"` corresponds with the deprecated attribute `disabled="false"` .
`foreground`	Defines a color for the foreground of the control (texts etc.). This setting overwrites the default color of the color scheme! This attribute does not work for the `Map` und `HtmlDocument` controls! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash in front of the color value! Do not use a shortened notation of the color value! Color code from the color palette of the Web App (see Theming), e.g. `A200`
`height`	Height of the control Possible values: Integer
`horizontalAlign`	Direction in which the elements flow. The order of the elements corresponds to their declaration. Possible values: `left` (default) `center` `right`
`textOverflow`	Defines what happens if the page is full. Possible values: `ellipsis`: Show with `...` that the text is not finished `hidden`: Break off text, paying attention to whole words `wordBreak`: Break off within the word `allow` (default): Break off text between words
`tooltip`	Defines a tooltip to be displayed under a graphic/icon. Translatable Data binding possible Possible values: any string or expression for data binding
`units`	Defines the unit that applies to size specifications. Possible values: `pixels` (default) `percents`
`visible`	Defines if the control is visible. Data binding (boolean) possible Possible values: `true` / `false` or data binding expression
`width`	Width of the control Possible values: Integer

The size of the image can be adjusted using the general attributes height and width. The default value is in pixels.
If only height or width is specified, the aspect ratio is maintained. If both height and width are specified, the image will be distorted.

If size specifications are defined neither on the image control nor on the parent element (via the general attributes height and width), display problems may occur in some browsers.

`<SelectAction/>` within an Image control

The Select action is created using the <SelectAction/> element within <Image> and is triggered once a user selects the image.

`<DoubleclickAction`> within an Image control

The DoubleClick action is created using the <DoubleClickAction/> element within <Image> and is triggered once a user double-clicks the image.

Example <Image> from static resource

The following example shows the usage of the <Image> tag.

XML

<DetailComponent name="ExampleImage" path="ExampleImage" displayName="Example Image">
	<FlowLayout>
		<Image value="image.jpg"/>
	</FlowLayout>
</DetailComponent>

Example <Image> with data binding (dynamically from a Technical Process)

Images in Base64 format

The following example shows the usage of the <Image> tag with data binding.

XML

<DetailComponent path="ExampleImageWithDataBinding" name="ExampleImageWithDataBinding" displayName="Example Image with Data Binding" default="true" process="Image.wrf">
    <Properties>
        <Property name="image" type="Base64" />
    </Properties>
    <FlowLayout>
        <Image value="#image"/>
    </FlowLayout>
</DetailComponent>

The data provided by the Technical Process Image.wrf must have the following format:

XML

<?xml version="1.0" encoding="UTF-8" ?>
<Ok>
    <image mediaType="image/jpeg">
		<!-- Base64String -->
	</image>
</Ok>

Images from an external URL