HTML Control, In Gallery, ThisItem.Picture, Possible?

[seadude]

Hello,

To make my app more performant, I'm substituting disparate controls for a single HTML Text control within a Gallery.

Is it possible to show an image using HTML control and something like "ThisItem.Photo"?

Example:

• Collection (`colTest`) has four columns:
  • Name
  • Address
  • URL
  • Photo
• Gallery Items property is set to `colTest`
• HTML Text property is set to:

"
<table id='test'>
  <tr>
    <th text-align='center'>" & ThisItem.Name & "</th>
  </tr>
  <tr>
    <td text-align='center'>" & ThisItem.Address & "/td>
  </tr>
  <tr>
    <td>" & ThisItem.URL &"</td>
  </tr>
  <tr>
    <td><img src='ThisItem.Photo'></img></td>
  </tr>
</table>
"

I've also tried: 

• `<td><img src=' " & ThisItem.Photo & " '></img></td>`
• `<td><img src=" & ThisItem.Photo & "></img></td>`

Do I have the syntax wrong or is this pattern not currently possible in PowerApps?

Thank yoU!

[Anonymous]

@seadude No, I haven't tried this inside a gallery, but that may not be the issue? I could try and get back to you though.

I think the difference between what you're doing and what I did is that I referenced the 'Link to Item' in my JSON() function, which works with the HTML <img> tag. You appear to be, from me read of your code, using an actual image that you create on the fly and not a link? 

[seadude]

That sounds correct. The image is not hosted anywhere, but rather is returned in as a response from an API request.

[Anonymous]

I need that case, I have 2 possible options.

1. Patch the images (and related item data) to a data source of your choice and get the image link that way. This may not suit as you may be getting a large number of images, not sure? But if your gallery only holds 10/20 items only, you should be able to overwrite data to this source as needed.

2. When you create your second collection, use AddColumns() to build out the image properties of 'Name', 'ContentBytes' and '@odata' then try and reference that somehow. This is a little beyond my skills but I'd imagine it's doable.

Food for thought

[seadude]

@PowerAddict, this one has been stumping us all for a few days. Any insights?
In a nutshell, is it possible to show a .png that is returned from an API call (NOT stored in a Data Source), in an HTML Text control (img src=tag) within a Gallery?

[Anonymous]

@seadude just a follow up, yes I was able to add the image into a html element inside a gallery. See below pic. I used AddColumns() to create the JSONImage column which holds the image link

Note: it's not necessary to use alcoholic beverages as the images lol

[seadude]

Hi @Anonymous . You are able to do this because the images are stored in a Sharepoint list. You could use "Link to Item" without wrapping it in the JSON function because it is a URL.
The difference between your proposed solution and my issue, is that I received a .png file as a response from a REST API call. The image is not stored anywhere, it is just sitting in my collection as a .png file.

I can very simply put an *Image* control in the gallery and set its Image Property to ThisItem.Photo and the image will appear.

This is the crux right here:

• I want to use a SINGLE HTML text control to display the image along with the other collection attributes in an HTML table
• The problem I'm having is... I can't figure out how to show the .png file (not a URL!) as <img src>

[PowerAddict]

This is interesting. I will definitely take a look tonight.

Thanks,
Hardit Bhatia
https://thepoweraddict.com

[Anonymous]

Have you tried adding an image control and then referencing that control in your html code?

eg. <img src=" & yourImageControlName & " />"

This worked for me but as you say I'm using a link so may not for you? If it does, you could just hide the image control to meet your design needs

[seadude]

Here is the big picture...

• I have a collection that is the response from multiple Azure Maps API calls.
  • "glrImage" is a .png file. "jsonImage" is the .png wrapped in the JSON() function.
  • 
• I have a Gallery with 6 separate controls to display the contents of the collection...
  • 
• I want to consolidate these controls into a single HTML text control using an HTML table
  • But no matter which variant of ThisItem.glrImage or ThisItem.jsonImage I use, I cannot get the image to show up in the HTML table

[seadude]

The HTML for the table is...

"
<table id='test'>
  <tr>
    <th text-align='center'>" & ThisItem.name & "</th>
  </tr>
  <tr>
    <td text-align='center'>" & ThisItem.dominant_discipline & "/td>
  </tr>
  <tr>
    <td>" & ThisItem.address &"</td>
  </tr>
  <tr>
    <td><img src='" &  ThisItem.glrImage &  "'alt='' border=3 height=250 width=250></td>
  </tr>
  <tr>
    <td text-align='center'>" & ThisItem.url & "</td>
  </tr>
</table>
"