Display image form a byte array

  

Any way to display image from a byte array (binary data) in a local variable. I came across posts which show how to display image form binary data by directly linking it to database(entity) but nothing around using binary data from local variable to display image. 

Tushar Panpaliya wrote:

Any way to display image from a byte array (binary data) in a local variable. I came across posts which show how to display image form binary data by directly linking it to database(entity) but nothing around using binary data from local variable to display image. 

I think we can't directly bind binary data to image widget in web applications, but can in mobile application. Hope this will help https://success.outsystems.com/Documentation/10/Developing_an_Application/Design_UI/Images/Display_an_Image#Example_in_a_Web_App 


Hi,

You could pull this off by using data urls.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

What you do, is have your binary data from local variable encoded as base64 and use that as img "src" tag contents, decorated with appropriate meta info. Here's an example how your local data should look when your binary data is png image, snipped from Stack Overflow:

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

In your web app, you can set it up like this (simplified example).

This example is missing the step of actually converting your binary data to base64 data url and storing it to local variable, but I'm sure you can find some extension actions to do so (BinaryData could be a good starting point).