Sending Images as inline Attachment within HTML Email template using Django

Question

I am trying to send an HTML email that would render an inline image. My code in views.py is as follows:

import ...

def signup_mail_function(form):      # here, form is just my context 
    subject = "Signup Successful"
    html_message = render_to_string('emailTemplate.html', {'form': form})
    plain_message = strip_tags(html_message)
    from_email = 'uconnect786@gmail.com'
    to_email = [form.email]

    # Sending email here
    msg = EmailMultiAlternatives(subject=subject, body=plain_message, from_email=from_email,to=to_email)                               
    msg.attach_alternative(html_message, "text/html")
    msg.content_subtype = 'html'
    msg.mixed_subtype = 'related'

    img_path = settings.STATIC_DIR + '/images/blogsImage.svg'  # path of my image
    image_name = Path(img_path).name      # Testing image name,which returns out to be same as image    name i.e blogsImage.svg
    print(img_path, image_name)                              # testing image paths here
    with open(img_path, 'rb') as f:
        image = MIMEImage(f.read(), _subtype="svg+xml")
        msg.attach(image)
        image.add_header('Content-ID', "<{}>".format(image_name))    # Setting content ID
        print("<{}>".format(image_name))                       # Testing content ID

    msg.send()

So the above is my handling code of email message. In the template, I am doing the following:

<img  alt="Blog Image"  src="cid:blogsImage.svg" />

Email is sent successfully with the image as the attachment but actually I was expecting to get the image as an inline image within the Html page.

The email I received, You see no images are displayed within Html template so 'alt' tags of those images pop up

I could snapshot the whole Html page but below it, I have that image as an attachment.

Tried:

I also tried to test image insertion within my Html template using direct URLs like the following:

<img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=.........." alt="Image">

But that didn't work out either. I have almost read every article and blog about rendering inline images with Django, stack overflow questions and answers but none of them has worked for me although I am coding the same way. Kindly someone point me in the right direction here!

Robin Rai · Answer 1 · 2020-01-28T16:27:04.987

1

first u should import following code in view.py

from email.mime.image import MIMEImage import os

def signup_mail_function(form):
msg = EmailMultiAlternatives(subject=subject, body=plain_message, 
from_email=from_email,to=to_email)
msg.content_subtype = 'html'
msg.mixed_subtype = 'related'
img_path = os.path.join(settings.BASE_DIR, '/images/blogsImage.svg')
with open(banner_path, 'rb') as banner_image:
    banner_image = MIMEImage(img_path.read())
    banner_image.add_header('Content-ID', '<blogsImage.svg>')
    msg.attach(banner_image)
msg.send()

and in html templates

<img  alt="Blog Image"  src="cid:blogsImage.svg" />

edited Jan 28 '20 at 16:27

answered Jan 28 '20 at 16:17

Robin Rai

11
3

can you please explain a bit... What is that 'banner_path' here ? – Fakhar Mahmood Jan 28 '20 at 18:07
This would send it as an attachment , not as embedded image . – FYP May 03 '21 at 19:34

score 0 · Accepted Answer · answered Jan 28 '20 at 19:17

I found the answer to my question...! The problem was not in the code as I was expecting, but in the image, I was trying to send an 'SVG' image in my email message which is not supported by many email clients even Gmail so that was the problem. The code is working fine with other formats. You can get more about supported email formats here:

How can I embed SVG into HTML in an email, so that it's visible in most/all email browsers?

Sending Images as inline Attachment within HTML Email template using Django

2 Answers2