The Image widget is a control that allows us to embed an image within a page. You can set the dimensions the image using the styling attributes of the component and also attach page events. The Image control obtains its image data from one of various sources including:

• a static file resource specified by the UPL attributes src or srcBinding,
• a byte[] array in memory referenced by the property the control binds to,
• and an ImageGenerator component referenced by the property the control binds to.

The static file resource option has a precedence over the two other image source options.

Listing 1: Image control with static file resource UPL

!ui-image:profileImg
    src:$s{web/images/profile.png}
    style:$s{width:240px;height:420px;}

Use the byte[] array option where your image is stored in memory.

Listing 2: Image control using byte array UPL

!ui-image:profileImg
    binding:profileImage
    style:$s{width:240px;height:420px;}

Listing 3: Profile page bean using byte array

ProfilePageBean pageBean = ...
byte[] profileImg = ...
pageBean.setProfileImage(profileImg);

The ImageGenerator option is useful when you want to generate images, to be embedded in a page, on the fly.

Listing 4: Image control using image generator UPL

!ui-image:profileImg
    binding:imageGenerator
    style:$s{width:240px;height:420px;}

Listing 5: Profile page bean using image generator

ProfilePageBean pageBean = ...
ImageGenerator imageGenerator = ...
pageBean.setImageGenerator(imageGenerator);