cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
calvares
Impactful Individual
Impactful Individual

HTML image displaying in email but not PDF

In my flow I've built a HTML table and referenced the image (which is stored in a SharePoint attachments folder) as follows:

<img src="Sharepointlink.jpg"alt="Observation images" width="100" height="100"/>

 

I used OneDrive 'Create file' then the 'Convert file using path' to convert to PDF.  I've added the HTML table to the body of my email and the PDF file as an attachment. 

In my email the images appear as I'd like:

Email contentEmail content

But not in the PDF:

PDF filePDF file

I'm guessing I'm missing something from the URL code for it not to be rendering the image in PDF. I don't think the Base64 applies to this though as the images aren't stored in a file library right?

1 ACCEPTED SOLUTION

Accepted Solutions
DamoBird365
Super User
Super User

Hi @calvares 

 

You need to convert an image into a dataURI.  This can be done with an expression.

 

DamoBird365_0-1617910209776.png

 

I have saved a microsoft.png image to my one drive, converted the image to datauri and then within my html called <img src=like so:

DamoBird365_1-1617910209684.png

 

 

You can then create an html file, convert the file and then create a copy of the output from the convert.

 

DamoBird365_2-1617910210301.png

 

 

and this is what I got:

DamoBird365_3-1617910209947.png

 

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Cheers,
Damien


P.S. take a look at my new blog here

View solution in original post

6 REPLIES 6
DamoBird365
Super User
Super User

Hi @calvares 

 

You need to convert an image into a dataURI.  This can be done with an expression.

 

DamoBird365_0-1617910209776.png

 

I have saved a microsoft.png image to my one drive, converted the image to datauri and then within my html called <img src=like so:

DamoBird365_1-1617910209684.png

 

 

You can then create an html file, convert the file and then create a copy of the output from the convert.

 

DamoBird365_2-1617910210301.png

 

 

and this is what I got:

DamoBird365_3-1617910209947.png

 

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Cheers,
Damien


P.S. take a look at my new blog here

calvares
Impactful Individual
Impactful Individual

Thank you @DamoBird365 . I didn't realise there was an expression for dataURI. I've tried it with attachment content and have had some success. But since I'm doing this within an apply to each, I'm only getting the first image appearing on my PDF. Good start though! 

I'll play around with it some more to see if I can get the other images displaying.

calvares
Impactful Individual
Impactful Individual

@DamoBird365 

OK I need more help with this as I can't work out why only my first image is displaying. 

So I have one flow which runs on create of a SP item, gets the attachment content, converts it to dataURI,  concats it into an <img src /> expression and saves that variable to a column for that SP list item. The 2nd flow is a PowerApps button one that creates a HTML table and the PDF file to be emailed to the user.

 

Converting attachment content to dataUri and creating a concat variableConverting attachment content to dataUri and creating a concat variable

The dataUri expression for my datauri variable is: dataUri(outputs('Get_attachment_content')?['body'])

The html variable is set to: concat('<img src=','"',variables('datauri'),'"/>').

 

If I check the field where the html expression is saved, it all looks fine. For multiple images it's saved each expression as one long string. This is how it looks when I inspect the html of the email I received.

On inspection of the html in the emailOn inspection of the html in the email

This is what I got:

as displayed in emailas displayed in email

 

As far as I can see, nothing seems to be wrong with the HTML itself. Could the issue be with the conversion to the dataUri image that follows the first one?

calvares
Impactful Individual
Impactful Individual

So instead of using 'append to string variable' for my dataURI variable, I used Compose and that resolved the issue.

Hi @DamoBird365 ,

 

Can you elaborate on what is inside each of these steps a little more??

I've got a HTML doc, with an image top left and I get the datauri step - datauri(outputs('Get_file_content_using_path')?['body'])

But how do you then do the part where you put that img src="outputs"?

calvares
Impactful Individual
Impactful Individual

@tscholl87  You will need to add it to your HTML script like this:

<img src="', outputs('Compose'), '"alt="doc image" width="100" height="100"> 

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

New Ideas Forum MPA.jpg

A new place to submit your Ideas for Power Automate

Announcing a new way to share your feedback with the Power Automate Team.

MPA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

Learn to digitize and optimize business processes and connect all your applications to share data in real time.

MPA Licensing.jpg

Ask your licensing questions at the Power Automate AMA!

Join Priya Kodukula and the licensing team, super users and MVPs to find answers to your questions on Power Automate licensing.

Users online (3,016)