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

[Toby958]

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.

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

Thanks!

[Paulie78]

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']

[Toby958]

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]

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

[Vlad1]

I believe you can simplify your filepath expression to 

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

[SJNiedermeyer]

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). 

[flowuser6]

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": []

}

[Anonymous]

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...

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

[Paulie78]

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?

[Anonymous]

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 

and this is how I am setting my Select action 

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

[Paulie78]

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

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

But you need

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

[Anonymous]

I tried that as well but not working 

[Paulie78]

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.

[Anonymous]

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

here is the HTML for the link that is not working 

 and here is the link to my working example 

[SJNBham]

Hi @Anonymous - 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. 

[mason007]

Hello,

I used Vlad1 for the Filepath expression:

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

That was working until I selected an image from Outlook web images in our tenant, then I got this error on my flow:

Unable to process template language expressions in action 'Filepath' inputs at line '0' and column '0': 'The template language function 'substring' parameter is out of range: 'start index' must be non-negative integer and should be less than the length of the string. Please see https://aka.ms/logicexpressions#substring for usage details.'.

The first expression didn't work, giving me a access denied error:

join(skip(split(items('Apply_to_each')['Thumbnail'], '/'), 3), '/')

Any help you can provide is appreciated!

[mason007]

I noticed it only happens when selecting the Stock Images in SharePoint.