Unanswered

Base64 Images to Emails through a Collection

(0) Share

Report

Posted on by NathanFra

174

I've been at this for a few days now and can't seem to get it working correctly. I am building a custom 'News Recap' for SharePoint (since the ootb option has a bunch of SharePoint branding our organization doesn't want).

That being said, I am using a Power App in conjunction with a workflow to bring in the site pages (Get Items) of the published news posts for the past 7 days and PromotedStatus = 2 for published news articles.

Part of the workflow is to convert the BannerImageUrl to a Base64 image. While the BannerImageUrl works great in the PowerApp, it doesn't translate through to emails. I've tried doing a Office365Outlook.SendEmailV2(), while targeting an HTMLText field that displays the news recap. While that part works as intended, the images never go through correctly.

Let me show some of my workflow and hopefully that helps:

Below is nested in an Apply to each of the value of the Get items.

Compose 5:

replace(substring(items('Apply_to_each')?['BannerImageUrl'], add(indexOf(items('Apply_to_each')?['BannerImageUrl'], 'Pulse'), length('Pulse'))),'%2F','/')
This way I can get the file path
 
Compose 6:
replace(replace(outputs('Compose_5'),'%28','('), '%29', ')')
So I can remove the UTF-8 coding in the hyperlinks
 
Compose 7:
Converts the content of the file to base64

Once in the Power App I am doing a ForAll and ParseJSON to get teh returned string array back into a table.

Filter(ClearCollect(colSitePages,
ForAll(Table(ParseJSON('Marketing-GETSitePagesLast7days'.Run().response)),
{ID:Value(Value.ID),
Title:Text(Value.Title),
BannerImage:Text(Value.BannerImage),
Description:Text(Value.Description),
URL:If(StartsWith(Text(Value.URL),"SitePages"),Concatenate("----","",Text(Value.URL)),Text(Value.URL)),
Checked:false,
Published:Text(Value.Published),
Base64Image:Text(Value.Base64Image)
})),!IsBlank(Published));

The app then displays the collection in a gallery for the user to decide which news posts they want to display (in this example I am only pulling a single page for testing).

The selected articles are then placed into a different collection.

This is what the template of the email looks like using the HTMLText in the Power App, and it looks exactly how it should. For the in app view, I am just using the BannerImageUrl as the Base64Image causes the app to slow down or crash completely.

To get this to format correctly, I am using a Concat() within the HTMLText so multiple articles can be displayed.

The button within the app, again uses the OutlookOffice365.SendEmailV2() and I've tried using the HTMLText field or the HTML code placed directly in it. If doing the second option, I replace BannerImage with Base64Image.

However this is how my emails always come in.

I've even tried passing the html text field through Power Automate in a workflow and it nets the same result. Does anyone have experience getting collection items to pass base64 images through?

Categories:

Business Process Flows

I have the same question (0)

All responses (3)

Answers (0)

stampcoin 4,082 Super User 2025 Season 2 on at

Like (0)

Report
Base64 Images to Emails through a Collection

@NathanFra Hi,

There is a limitation regarding the Office365 outlook connector:

Edit (forgot the reference link) :https://learn.microsoft.com/en-us/connectors/office365/#general-known-issues-and-limitations

We have a size limit of 1MB per data uri for inline embedded images, i.e. the image cannot be more than 1MB after base64 encoding. This only applies to embedded images inside of the mail body. Bear in mind the size of an image after being converted to a base64 string increases. Depending on the image compression, format, and other characteristics it can increase anywhere between 25% to 50%. For instance, an image of more than 700KB will after being converted to a base 64 string likely exceed the 1MB limit stated above.

Please confirm the size doesn't reach the limit.

Or try to use HTTP with Microsoft Entra ID (preauthorized)

Below is minimal flow for testing (manual trigger + Get attachments + Get attachments content + Invoke an HTTP request), you can use the connector in your app as well.

Invoke an HTTP request,

Method: Post.

Url: https://graph.microsoft.com/v1.0/me/sendMail

Headers: Content-Type = application/json

Body: ( example).

{ "message": { "subject": "test", "body": { "contentType": "HTML", "content": "<table border=\"1\" cellpadding=\"6\" cellspacing=\"0\"><tr><th>Image</th><th>Test row</th></tr><tr><td><img src=\"cid:mycid\" style=\"max-width:160px;height:auto;border:0\"/></td><td>Test</td></tr></table>" }, "toRecipients": [ { "emailAddress": { "address": "telen@contoso.com" } } ], "attachments": [ { "@odata.type": "#microsoft.graph.fileAttachment", "name": "myPic.png", "contentType": "image/png", "contentBytes": "@{base64(body('Get_attachment_content'))}", "isInline": true, "contentId": "mycid" } ] }, "saveToSentItems": true }

example of received email ( outlook online).

Was this reply helpful? Yes No
NathanFra 174 on at

Like (0)

Report

Base64 Images to Emails through a Collection

@Nived_Nambiar,

I've confirmed that the link is correct. I've even taken the Base64 from the workflow into a base64 to image converter, and the image displays correctly there. It seems to be an issue of not using the base64 text directly in the HTML. Using it by concating the collection's column does not display the image.

Was this reply helpful? Yes No
Nived_Nambiar 18,009 Super User 2025 Season 2 on at

Like (1)

Report

Base64 Images to Emails through a Collection

Hi @NathanFra

Did you check the link displayed in email corresponding to that image ?

Thanks & Regards,
Nived N

Stay connected:
LinkedIn | YouTube | Blogs

Was this answer helpful?
If yes, please mark it as the solution by selecting the checkbox in the discussion thread.
Your feedback motivates me to keep contributing. Thank you!

Was this reply helpful? Yes No