How to shrink an image in an Embedded tag


I hope this is not too much of a newbie question, but I am trying to display an image from an AWS S3 bucket in a Cuba platform page to go alongside the text information stored in the DB. I have created an Embedded component in the page to do this, the XML and code for the URL are below:

<groupBox caption="Photo"
    <embedded id="app1B"

app1B.setSource(new URL(""+entity.getUuid()+"/appliance1imageB"));

The trouble is the image is big (>1000px per side), but the 250px box just means you scroll around the image in the Embedded component - I want it to shrink to fit. If I modify the style tags on the iframe image directly in the resulting source I can add width and height to shrink it, but I can’t see how to do that using the XML or Controller.

Any help would be most appreciated,


There is a problem with Embedded.setSource(URL) method. It sets Type.BROWSER implicitly. Simply swap lines:

app1B.setSource(new URL(""+entity.getUuid()+"/appliance1imageB";));

After that, an image will be displayed as HTML tag and zoomed if you set width/height for Embedded component.

In the upcoming version 6.6 we have introduced new Image component with flexible zooming options and convenient API. See documentation draft here:

Thanks for the answer!

I am starting a new project, is 6.6 stable enough to use now? I would prefer to use the latest available.

Yes, it is stable enough and we are planning to release 6.6.0 in 2-3 days.