Display image returned by API

Hello,

I try to get an api working, but I'm having a hard time.
The rest API call returns an image (binary data). But how to display it? Any idea?
I already have a response of type binary data, but I'm unable to fill in the required properties from the image widget.


Greetings, Niels

Hello Niels

Can you show us the error thrown in Service Studio when you try to assign the Binary in the response to the image widget?

Regards,

Ângelo

Hi Niels,

You can store the image in the database, then use it as a database image?

@Angelo: It's the attribute property. Can't fill it in...


@Kilian: I don't think its an option.. Because it's in a form where the user has to fill in some fields, and those fields will be used to call the API which will return an image based on those fields. (before saving)

Niels,

What I mean is, when you call the API, which returns the binary, store the binary in the database, and use it as a database image.

Besides the option given by Kilian, you can also convert the binary to base64 and display the image through an html img tag in an expression.

So...

1. Add a text variable (image_ base64) to the screen (that will contain the base64)
2. After the call to the rest, use the BinaryToBase64 action from BinaryData extension to convert the image binary to base64 and store in the text variable (image_base64)
3. Add an expression to the place where you want to show the image with the following text:

"<img src=""data:image/png;base64,"+image_base64 +""" alt=""alt text"" />"

Remember to set the Escape Content to NO.
This is a way to show the image directly into the page without having to store it before.

Cheers,
Eduardo Jauch

Hi Niels,

You can embed the image contents directly on the URL. You'd need to setup your image to be of Type External, and its URL property should be set to a data uri with the binary data encoded using base64: 

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..."

The disadvantage of this approach is the page takes longer to load, as the binary data is directly in the HTML.

Another alternative is to call the REST api in the preparation of a GetImage screen that ends in a Download tool. You could return the binary output of the REST api, and then use the URL for your GetImage screen as the External URL of your image...

Jorge Martins wrote:

Hi Niels,

You can embed the image contents directly on the URL. You'd need to setup your image to be of Type External, and its URL property should be set to a data uri with the binary data encoded using base64: 

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..."

The disadvantage of this approach is the page takes longer to load, as the binary data is directly in the HTML.

Another alternative is to call the REST api in the preparation of a GetImage screen that ends in a Download tool. You could return the binary output of the REST api, and then use the URL for your GetImage screen as the External URL of your image...


Thanks, I already tried that, but not with a base64 only with binary data. Didn't knew you could use base64 inside the url property

Hi Niels,

You can store the binary data on a Local Variable and set the image type to Binary Data and the Image Content to point to the local variable that you created.


To have your function populating the local variable add the Assign action to assign the value from the api call to the local variable, as follows:


Hope it helps future cases!

Hi Pedro,

This topic is over two years old, with a post marked as solution, and none of the posts mentions Mobile.

Unlike the solution you describe for Mobile, on Traditional Web the Image widget does not accept a Binary Data value that doesn't come from the Database or an image resource already on the module.

Although your effort helping the community is highly appreciated, in this case if might be better directed at other more recent topics still without a solution ;-)

Just a heads up, in Reactive Web, the Image widget behaves like in Mobile, so it would be possible to assign directly Binary Data content to it (for instance a local variable, like Pedro's solution suggests).

And with this extra bit of information I will close this topic.