reading html template for email is not shown as expected

Question

When sending an email with the code below, the result is not as expected. There's a missing image AND the template is not centered as should be. I provide what exists vs what is expected. I'm not sure if the problem is in the HTML or the reading of the template.

python code:

    import smtplib, ssl
    from email.mime.text import MIMEText
    from email.mime.multipart import MIMEMultipart 
    
    class Mail:
    
        def __init__(self):
            self.sender_mail = 'someone@gmail.com'
            self.password = 'my_pw'
            self.smtp_server_domain_name = "smtp.gmail.com"
            self.port = 465
    
        def send(self, emails):
            ssl_context = ssl.create_default_context()
            service = smtplib.SMTP_SSL(self.smtp_server_domain_name, self.port, context=ssl_context)
            service.login(self.sender_mail, self.password)
            
            for email in emails:
                mail = MIMEMultipart('mixed')
                mail['Subject'] = 'Celebrations'
                mail['From'] = self.sender_mail
                mail['To'] = email
     
                html_file = open('./templates/index.html')
                html_content = MIMEText(html_file.read(), 'html') 
                mail.attach(html_content) 
                service.sendmail(self.sender_mail, email, mail.as_string())
    
            service.quit()
        
    
    if __name__=='__main__':
         
        mail = Mail()
        mail.send(emails=['you@gmail.com'])

index.html on github

outlook result:

expected result (this is the index.html on a browser):

Answer 1

I am assuming that you are using the Outlook app and not the web based version.

I tried viewing the email from the web version of Outlook and Gmail and the only issues those had were the image not loading and any anchor tags lost their styling.

After some digging I found this which allows you to send the image as an attachment and use it in the html.

I modified the python code to attach the image:

import smtplib, ssl
from email.mime.text import MIMEText
from email.mime.multipart import MIMEMultipart 
from email.mime.image import MIMEImage

class Mail:

    def __init__(self):
        self.sender_mail = 'sender@gmail.com'
        self.password = 'password'
        self.smtp_server_domain_name = "smtp.gmail.com"
        self.port = 465

    def send(self, emails):
        ssl_context = ssl.create_default_context()
        service = smtplib.SMTP_SSL(self.smtp_server_domain_name, self.port, context=ssl_context)
        service.login(self.sender_mail, self.password)

        for email in emails:
            mail = MIMEMultipart('mixed')
            mail['Subject'] = 'Celebrations'
            mail['From'] = self.sender_mail
            mail['To'] = email

            with open('./templates/index.html') as html_file:
                html_content = MIMEText(html_file.read(), 'html') 
                mail.attach(html_content) 

            with open('images/email.png', 'rb') as img:
                msgImage = MIMEImage(img.read())
                msgImage.add_header('Content-ID', '<images/email.png>')
                mail.attach(msgImage)

            service.sendmail(self.sender_mail, email, mail.as_string())

        service.quit()


if __name__=='__main__':
    mail = Mail()
    mail.send(emails=['receiver@gmail.com'])

and I also modified the html slightly:

<img src="cid:images/email.png" ... >

This allowed the image to render in Gmail and Outlook's website version.

Try the above to see if you can get the image to load at least.

I believe different email clients will have their own quirks when it comes to displaying HTML. For example, Gmail apparently re-formats links when they don't have any inline styling. I'd look in to what weird things Outlook does when it renders HTML.