cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Toby958
Helper I
Helper I

How to parse an image URL into a HTML table and display the image file?

I'm working on solution in Power Automate to send a customised news digest from SharePoint Online. For this I am using a HTML table where the news article title, description, link and thumbnail are added to the table and then sent via email.

 

The solution works fine when populating textual data (strings), such as the article's title and description. However, it does not seem to work when trying to parse in an image URL. As you can see in the screenshot below, I've attempted to use the <img> tag to display the thumbnail, but the HTML table is displaying this as literal raw text.

 

2020-12-03 11_35_09-Window.png

 

Is there a way I can make the HTML table parse the image URL as an image?

 

Thanks!

33 REPLIES 33
Paulie78
Super User
Super User

  1. In the parse JSON I just put the output from the select action. (you can get this from the run history).
  2. Expressions for the append to string variable action are in the post above. But here is the entire code:
<tr>
 <td>@{items('Apply_to_each')['Title']}</td>
 <td>@{items('Apply_to_each')['Created']}</td>
 <td >
 <img src="data:@{body('Send_an_HTTP_request_to_SharePoint')['body']['$content-type']};base64, @{body('Send_an_HTTP_request_to_SharePoint')['body']['$content']}"  />
 </td>
</tr>

Expressions on their own:

Content-Type

outputs('Send_an_HTTP_request_to_SharePoint')?['body']['$content-type']

Content

outputs('Send_an_HTTP_request_to_SharePoint')?['body']['$content']

That's great, thanks Paulie. I've managed to get mine working today, just a case of incorporating some CSS styling into it now.

 

Many thanks again for all your support with this, I'm sure this thread will be useful for others in the future too!

 

 

Paulie78
Super User
Super User

Well done! It is tricky, but glad you got it sorted.

I believe you can simplify your filepath expression to 

substring(items('Apply_to_each')['Thumbnail'], indexOf(items('Apply_to_each')['Thumbnail'], '_layout')
SJNiedermeyer
Regular Visitor

Something to keep in mind is the image src attribute will get HTML encoded by the Outlook desktop client. This means the banner image url will break for images that were uploaded to SharePoint. The stock images hosted by Microsoft's CDN or from other websites will be fine as long as they don't use ampersand parameters in their URIs. 

 

We were creating a weekly employee news digest email and finally solved this with Paulie78's help (thank you!) Retrieving the image content using the Send HTTP request to SharePoint action was the last piece to the puzzle. 

 

Our worklfow checks for an ampersand (&) in the URI and encodes the banner thumbnail as base64. We also whitelisted the email From address for managed devices so linked images won't be suppressed. There may be a way to embed all the images, but might take a premium flow action to get the content of the stock images hosted by Microsoft and other website (i.e. not available through SharePoint API). 

Hello! Is it possible to do something to embed a SharePoint stock image? When I try to follow your steps this is as far as I can get:

 
 
Send an HTTP request to SharePoint [outputs]
{
  "message""404 NOT FOUND\r\nclientRequestId: 7889abad-d2fa-470e-bba8-4d2e3a0c60ed\r\nserviceRequestId: fe022ca0-b0f3-1000-a31c-de0f361b99f7",
  "status"401,
  "source""https://XXX.sharepoint.com/https://cdn.hubblecontent.osi.office.net/m365content/publish/7ba5aea9-7f81-4335-aecd-7a0d3df49203/thumbnails/large.jpg?file=495703920.jpg",
  "errors": []
}
Rafia1
Helper II
Helper II

hi @Paulie78  thanks for your help... the method helps me to resolve the image-related issue but now m facing a new problem... the 'Link to item' is not working, when I see the output of my select it's showing me the exact link to the post but appending to string variable is not adopting this...

 

Rafia1_0-1658217067448.pngRafia1_1-1658217109997.png

any help would be great!... I commented on your video as well but did not get any reply 😞

  

I don't think I understand the problem. The link in your screenshot looks ok, so is it changing before it gets delivered in the email?

hi @Paulie78! thanks for your reply.. yes it is not taking the <a href =" " >text</a> in the URL... all my work is complete except this one... this is how I am passing my Link in the code 

Rafia1_0-1658219599003.png

and this is how I am setting my Select action 

Rafia1_0-1658220111555.png

 

is there anything I can add to get it resolved... your help would be highly appreciated 

You do not have double quotes around the link. Your example would produce:

 

<a href=https://....><p>....

But you need

<a href="https://..."><p>...

 

I tried that as well but not working 

Show an example of the final HTML that is produced. If you view the source of the email in outlook does the content and HTML look correct?

 

You can PM it to me if it is sensitive.

No it's not sensitive... it's just the test... 

here is the HTML for the link that is not working 

Rafia1_1-1658221975107.png

 and here is the link to my working example 

Rafia1_2-1658222049911.png

 

 

SJNBham
Advocate II
Advocate II

Hi @Rafia1 - here's how we build the articles portion of our email. We use a variable to store the Link to Item value because we populate that with an alternate link if it's a repost news item. 

 

SJNBham_0-1658420097266.png

 

SJNBham_1-1658420154476.png

 

 

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Users online (2,602)