Display Image in View using Url

Support
#1

Hi,

We need ti display the image logo using the value from DB which is in URL format. I initially use below syntax but it expects byte[].

 <image id="logoPreview" property="logoUrl"  scaleMode="FILL"/>

However, this throws GuiDevelopmentException: The Image component supports only FileDescriptor and byte[] datasource property value binding error.

How can i use the URL to display the image?

#2

Yes, you can specify URL property for the image component.

<image>
    <url url="https://www.cuba-platform.com/sites/all/themes/cuba_adaptive/img/lori.png"/>
</image>
#3

Hello, I have read this from document. However, the url value should be coming from the Entity field, not hard coded.

#4

Well, in the same document you can find a great programming API - setSource() method. Therefore, it is easy to set image URL programmatically like this:

        URL url = new URL("https://cuba-platform.com/uploads/f12d77fb869f4ee48e27faae2f82178b.jpg");
        imgTest.setSource(UrlResource.class).setUrl(url);
#5

I am actually looking for a more direct approach using the XML. Anyway, based on your example, the URL is still hard coded and not retrieved from the Entity. From the document section, I am also having trouble looking where to put the code and how to access entity attributes.

#6

It’s a good point. I’m not sure if it is possible with XML, but you can do everything programmatically even add an image to the data table like described here.

I don’t get it. Do you want to add images to browser or editor? Could you describe your case and attach a desired screen layout please?

#7

Sorry for the confusion. I want to display on both. For the the editor, I assume it is in the ClassEditor.java but I don’t know where to start.

#8

If you want to show images in both browser and editor, you have all the samples you need. It might look like snippets below (I haven’t checked it though).

For the browser:

table.addGeneratedColumn("image", entity -> {
    URL url = new URL(entity.getUrl());
    Image image = uiComponents.create(Image.NAME);
    image.setSource(UrlResource.class).setUrl(url);
    image.setHeight("100px");
    return image;
});

For the editor:

URL url = new URL(getEditedEntity().getUrl());
imgTest.setSource(UrlResource.class).setUrl(url);

Hope this will help.

#9

Thanks for the example :slight_smile: I was able to update the browser. For the editor, it is not clear in the document how to specify the target component in the XML editor. For example, I have this field definition:

<image id="logoPreview" property="logo" scaleMode="FILL"/>

How do I link it in imgTest?

#10

Just inject the component into the controller.