Blob to Image in PowerApps

[Anonymous]

I have a flow which serves up an image as a Blob data type to PowerApps. I can't seem to get it to display as an image. Any recommendations on a conversion or solution in either PowerApps or Flow?

[TurnerLab]

PowerApps doesnt work well with Images - I'd suggest using the Camera feature, take a picture that sends the URI to MS Flow. Then using flow convert the image to Base64 and write that to your data source. 

[Anonymous]

Thank you for the suggestion. I'm actually trying to do the reverse though.

I have a data source with an image that I want to display in PowerApps.

[TurnerLab]

If you're referencing image Selected Parent record from datasource gallery you can use: ThisItem.YourPictureURI  add a image object, select the image object and select the property Image. Add record reference: ThisItem.YourPictureResourceURI. If you're not using a gallery you will need to use LookUp() to find the record you wish to specifically display in the datasource.

[TurnerLab]

Also - Photodata that I record looks like this: 'data:image/png;base64,iVBOR........etc etc etc etc etc etc......'

Not sure how you are recording yours.  'blob:image/' might be the issue here

Sorry for broken thoughts - also working through some powerapps issues myself! 😄

[Anonymous]

I'm not sure you're grasping what I'm trying to do.

I have a button in PA that triggers a Flow. The Flow then makes an API call which returns an image.

I'm trying to find out how to take that image from flow and then display it in PowerApps.

Here is the output from the HTTP request:

Here is the Compose output:

[v-xida-msft · Accepted solution]

Hi @Anonymous ,

Do you want to display the returned image binary data from your flow within your app?

Based on the flow's configuration that you mentioned, I think there is something wrong with it. I have made a test on my side, please consider take a try with the following workaround:

Flow's configuration as below:

App's configuration as below:

Within your flow, please set the Inputs field of the "Compose" action to following formula:

body('HTTP')?['$content']

Then within the "Respond to a PowerApps or flow" action, please remove the File Output, instead, please add a "Text" Output, then set the Value to the Outputs dynamic content of the above "Compose" action.

Then within your app, set the OnSelect property of the "Fire Flow" button to follownig:

Set(ImageFileContent, ConvertAPI.Run().filecontent)

Then add a Image control in your app, set the Image property to following:

"data:image/jpeg;base64," & ImageFileContent

Please consider take a try with above solution, then check if the issue is solved.

Best regards,

[Anonymous]

@v-xida-msft You're a PowerApps/Flow God!

Thank you very much for your solution, it worked like a charm. I can finally sleep again.

The one thing I had to adjust from your post that I was able to identify using your images is that when you typed:

Then add a Image control in your app, set the Image property to following:

"data:image/jpeg;base64," & ImageFileContent

The colon get's messed up by the forum. Between data and image is just a colon not ":"

Thank you again. This was a huge help.

[Anonymous]

How would we parse the HTTP response if more than one image is returned in the body?

Below expression returns the 1st image. 

body('HTTP')['$content']

Below expression  returns an object

body('HTTP')

Like

{"statusCode":200,"headers":{..},"body":{"$content-type":"...","$content":"..."},"body":{"$content-type":"...","$content":"..."},"body":{"$content-type":"...","$content":"..."}}

ParseJSON operator could not parse.

What actions/expressions would return an array/collection of $content?

Thanks in advance.