Python - Embedded Image in HTML SMTP email

Question

I'm generating emails using Python's smtplib, and I'm trying to re-create a signature to place at the bottom of each email. Below is a highly detailed and masterful recreation of this signature:

The text portion I've already got figured out.

body = """\
    <html>
        <head></head>
        <body>
            stuff
        </body>
    </html>
    """

Which I then attach to the message:

message_body = MIMEText(body, 'html')

message.attach(message_body)

What I can't seem to figure out is how to then embed the images so they're formatted like in the picture above. The lines in the picture are just to show alignment, but they don't exist in the signature itself. The images also contain hyperlinks.

I've tried something like adding this to the very end of the <body> tag to at least recreate the smaller images at the bottom:

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

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

I don't get any errors, but also nothing shows up when the email is sent. I don't know how I would begin formatting the larger image that should sit to the left of the text in the signature.

I can successfully include these images in the email as attachments using MIMEImage, but I don't want them as attachments, so that didn't work.

After the images are embedded as above, I assume I could just do something like this to add in the hyperlinks:

<a href="https://www.example.com">
<img src="img1.png" alt="example.com">
</a>

I'm new to HTML so these are uncharted waters for me, and I'm not sure what to do. I've read a lot of questions here that also mention base64 encoding, but I don't know if it applies to this situation.

Any help would be appreciated. Thanks!

Edit: New question posted here to address the issue that, once encoded and sent, the images in the sent email are showing up as blank.

have you tried uploading your images to a webserver and then using the img path, instead of a local path? — JiiB, Jan 20 '18 at 20:49
@JiiB This script will be run on a local machine, so the images will probably be saved either on the machine itself or in some directory the machine has access to. — pez, Jan 20 '18 at 20:50

pydvlpr · Accepted Answer · 2018-01-20T21:49:40.503

1

If you want to use embedded images in your html you need to base64 encode them before.

A html image tag would look like this then

<img src="data:image/jpg;base64,THEBASE64CODE" alt="image"high="30" width="30" />

There for you have to read the image file and base64-encode it with pythons base64.

Otherwise you need to refer to a ressource in the web which contains your images.

<img src="http://yourwebserver.org/image.jpg" alt="image" high="30" width="30" />

The first solution needs to send your images with every email. This increases the emails size.

The second solution needs to have a public web ressource and the the receiver system will load the images when after opening the email (if his/her email programm do not block it).

In your case I would try to design the email in plain html with your preferred editor and webbrowser. Thereafter I would try to modify the img-Tags with one of the given solutions.

Some additional infos for yout email-design:

Html tables can be very usefull to structure the data representation

<table border="1" >

<tr>
    <td>IMG left</td>
    <td colspan="2">

        your text that could be very long and usefull to your recipient<br><br>
        you should encode the mail text for html within your python application<br><br>

        otherwise you will have problems with newline and so on.
    </td>
<tr>
    <td></td>
    <td>IMG center</td>
    <td>IMG rigth</td>
</tr>
</table>

Replace the IMG with your img-Tag. Put your mail text into the text-section. Remove the border="1" to remove the borders of the html-table.

For HTML-encoding have a look at pythons HTMLParser

edited Jan 20 '18 at 21:49

answered Jan 20 '18 at 21:14

pydvlpr

311
2
6

Thanks, I tried the first option, encoding like this: `base64.b64encode(image_file.read())` and appending the resulting string to the end of this string: `'data:image/png;base64,'`. Then the full string was used here: ``. The images show up in the email now, but the images are the [broken image icon](https://i.pinimg.com/originals/f2/a8/0e/f2a80ee8087d750080763918df53d2be.jpg), not the actual images. Any idea what went wrong? – pez Jan 20 '18 at 21:31
I think there is gone something wrong with the encoding. I had a similar problem on an php project. Have a look at this side https://www.base64-image.de/. There you can upload an image and base64 encode it. Use this code for testing. – pydvlpr Jan 20 '18 at 21:40
I used that site and no longer see the broken image icon, however, now I see nothing at all. I updated the `img` tag to ``, and now there is just an empty box with a border where the images should be. I'll edit the question to contain this information. – pez Jan 20 '18 at 22:09
Please create a simple html file and try the img-Tag example from the website in it. Open it in your webbrowser. When everything is ok with it, you can try your python-base64 encoded image the same way. If both work you can be sure it is not an encoding problem. Does your %s contain only the encoded image given from base64.b64encode ? You have to put data:image/jpg;base64, before the base64: src="data:image/jpg;base64,%s" in your case I think – pydvlpr Jan 20 '18 at 22:16
I tested the encoded strings on the CodePen example and they worked, so I don't think it is an encoding issue. – pez Jan 20 '18 at 22:23
I believe the images showing up as blank is a separate issue, so I'll accept this answer and start a new question. – pez Jan 21 '18 at 00:52
`base64` embedding is not supported in gmail anymore – Nigel Dec 22 '18 at 19:08

Python - Embedded Image in HTML SMTP email

1 Answers1