Display image returned by API

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

Solution

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...

Solution

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