Image API
Definition
The UI element Image enables you to integrate graphics into the Web application in a format that is processed by the Web Server – for example, GIF, JPG, and PNG format. To specify the data source, use the source property.
You can assign a popup menu to the image which is visible as a little triangle at the bottom right-hand edge when the user places the cursor on the image.
Use
When using an Image UI element, you should always add a label to ensure accessibility.
Description of UI Element Properties
· adjustImageSize
Specifies whether the size of the image is adjusted proportionally. If this property is set to false, the image will be displayed according to the specified height and width, without keeping the proportions.
· alt
Determines an alternative text that is displayed when the graphic cannot be opened or found.
· border
Specifies whether the graphic is displayed with a border.
· height
Specifies the height of the graphic. You can specify the height in CSS units like em, ex, pixels, or percentage.
· isDecorative
Specifies whether an image serves for decorative purposes only. If it does not provide the user with any kind of information, set this property to true. When accessibility mode is active, this image will be ignored and removed from the tab sequence.
· source
Determines the Web address (URL) of the graphic through which the UI element receives the data. If you store the image file in your Web Dynpro project under → src → mimes →Components → <Name of Component>, you only have to specify the file name without a path.
· width
Specifies the width of the graphic. You can specify the width in CSS units like em, ex, pixel, or percentage.
Overview of Inherited and Additional Properties
Name |
Interface |
Type |
Initial Value |
Bindable |
Value Required |
adjustImageSize |
IWDImage |
boolean |
false |
bindable |
No |
alt |
IWDImage |
String (TranslatableText) |
|
bindable |
Yes |
border |
IWDImage |
int |
0 |
bindable |
No |
enabled |
IWDUIElement |
boolean |
true |
bindable |
No |
height |
IWDImage |
String (CSS size) |
|
bindable |
No |
isDevorative |
IWDImage |
boolean |
false |
bindable |
No |
source |
IWDImage |
String |
|
bindable |
Yes |
tooltip |
IWDUIElement |
String (TranslatableText) |
|
bindable |
No |
visible |
IWDUIElement |
Visibility |
visible |
bindable |
No |
width |
IWDImage |
String (CSS size) |
|
bindable |
No |
The inherited enabled property is ignored and does not affect the browser.