How to embed .png into HTML email?

Question

I'm currently using the following code to send an email (which contains a report) to users 3 times per day. I'd like to add in a graph to this email but can't seem to figure out how.

def HTML_Email(subject, to, html, files, filename):
    import smtplib  
    from email.mime.multipart import MIMEMultipart
    from email.mime.text import MIMEText                    
    from email.mime.application import MIMEApplication
    from os.path import basename
    import email
    import email.mime.application

    # Create message container - the correct MIME type is 
multipart/alternative.
    msg = MIMEMultipart('mixed')
    msg['Subject'] = subject
    msg['From'] = "ChicagoGISScripts@mobilitie.com"
    msg['To'] = ", ".join(to)

    # Record the MIME types of both parts - text/plain and text/html
    part2 = MIMEText(html, 'html')

    # create PDF attachment
    fp=open(files,'rb')
    att = email.mime.application.MIMEApplication(fp.read(),_subtype="xlsx")
fp.close()
att.add_header('Content-Disposition','attachment',filename=filename)

# Attach parts into message container.
msg.attach(att)
msg.attach(part2)

# Send the message via local SMTP server.
user = 'ausername'
pwd = 'apassword'
s = smtplib.SMTP('smtp.office365.com',587)
s.ehlo()
s.starttls()
s.ehlo()
s.login(user,pwd)
s.sendmail(msg['From'], to, msg.as_string())
s.quit()

Typically I'll use something like this to go along with it, but I'm trying to include a .png that's stored locally on my computer. is not working to embed an image into the body of the email, what am I missing here?

html = """\
<html>
  <head></head>
  <body>
    <p><font face ="Gotham, monospace">Some HTML,<br><br>
       <img src="C:\\Users\\Me\\Desktop\\graphs.png"></img></font>
    </p>
  </body>
</html>
"""

RemedialBear · Accepted Answer · 2017-06-29T19:09:12.120

3

Because you aren't hosting the image on a server, you won't be able to embed it in an email using a normal link. Try encoding the .png file into a data uri and setting that as the src

EDIT

Look at this other answer to see how to do this in python

EDIT 2

The resulting html should look like this

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

edited Jun 29 '17 at 19:09

answered Jun 29 '17 at 18:55

RemedialBear

644
5
15

So if I have `encoded = base64.b64encode(open("filename.png", "rb").read())` I would just do ``? Doesn't seem to be working as the image just shows up as an error in the email. – AGH_TORN Jun 29 '17 at 19:05
```encoded``` is a base64 encoded string, so you'll just print that string into the ```src="..."``` part. Look at the wikipedia article I linked to see what it should look like if you did it correctly (under the section "Examples of usage") – RemedialBear Jun 29 '17 at 19:07
Hmm, well I've tried it multiple ways now and it's still not displaying properly. I even hosted the image on a website and called it via the website. Is there something in my code that's preventing it from not parsing properly? Do I need MIMEImage? **EDIT** I've even tried linking from other websites, so I think it has to be something in my code... – AGH_TORN Jun 29 '17 at 19:31
try copying the html that you're generating and pasting it here. Maybe there's something else going on – RemedialBear Jun 29 '17 at 19:35
`"""\
Test

"""` – AGH_TORN Jun 29 '17 at 19:44
ah, you have some hidden characters in there. Try typing out that whole URL instead of copy/paste to avoid grabbing them. – RemedialBear Jun 29 '17 at 19:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/147982/discussion-between-atch-torn-and-remedialbear). – AGH_TORN Jun 29 '17 at 19:56

score 0 · Answer 2 · answered Jun 29 '17 at 18:59

Exactly what RemedialBear said. You have to host the email on a server and have an absolute src in your email body.

Instead of:

<img src="C:\\Users\\Me\\Desktop\\graphs.png">

You need:

<img src="http://www.somedomain.com/images/graphs.png" alt="Name' />

How to embed .png into HTML email?

2 Answers2