Forum | Appery.io

Hi,

I have a service in my app that invokes an API which returns an image (.png) as a byte array. I have tested it in a browser and it displays properly. But I'm not able to link that to an image component in my app.

I have tried to return the byte array as a json. The structure of the json is
[ { "graph" : [ .... ] } ].

The response from the service shows up as
$ - $ - graph - graph.

I've tried linking $ or graph to the image asset but neither worked. I have also tried to return an svg+xml from the API. But again, I didn't know how to link the response values to the image asset. Is there any tutorial on working with images returned by APIs. The weather app which is the only relevant tutorial I could find has an API that returns an image as a URL, which is not applicable in my case. For example

"weatherIconUrl": [ { "value": "http:\/\/cdn.worldweatheronline.net\/images\/wsymbols01_png_64\/wsymbol_0004_black_low_cloud.png" } ]

Appreciate your help. Thanks
Satya

Hi Satya,

Unfortunatly it's not clear what content you have in your json? May be it's base64string?

Please show us some screen shots with response from your API.

Regards.

Hi Yurii,

Here is some sample data returned by the API. There are around 51000 elements in the array.

[ { "graph" : ["89","50","4e","47","0d","0a","1a","0a","00","00","00","0d","49","48","44","52","00","00","09","42","00","00","05","d3","08","03","00","00","00","2b","c5","24","1e","00","00","01","14","50","4c","54","45","00","00","00","00","00",........] } ]

I have also tried to return the image as svg+xml. Here is a sample of that.

Thanks

Hi Satya,

Thanks for these details.

You need to convert these array of bytes to base 64 string.

See details here: http://stackoverflow.com/questions/53...

Then you can add "data:image/png;base64," prefix to this base 64 string and use this string as image asset.

Here is a good source to get correct base64 from your image to debug your implementation: http://www.base64-image.de/

Regards.