8

I'm trying to create an email in Django with inline images. 

msg = EmailMultiAlternatives(...)
image_file = open('file_path', 'rb') 
img = MIMEImage(img_data)
image_file.close()
img.add_header('Content-ID', '<image1>') 
img.add_header('Content-Disposition', 'inline')
msg.attach(img)
msg.send()

And in the template I would reference it like so:

<img src="cid:image1" />

This works fine in web browsers, outlook, thunderbird ... all except for the apple mail client on OSX, iPad and iPhone. The images are displayed twice. They are placed inline correctly but they are also attached to the bottom of the email. My question is, how do I get rid of the images at the bottom? or should I approach images in emails differently.

References:
http://djangosnippets.org/snippets/1507/
Django: How to send HTML emails with embedded images
creating a MIME email template with images to send with python / django

Community
  • 1
  • 1
SunnySydeUp
  • 6,680
  • 4
  • 28
  • 32
  • Retag your question to a more specific tag like "email" or "apple-email" to find people more interested in it and forget ask for "created using Django email" for now. – hynekcer Apr 11 '12 at 11:37
  • Attaching images (as far as I know) is an attempt to have them show by default - i.e. without having to enable a "Show all images from foo@bar.com" so the alternative is to instead use an URL to an image hosted on your server. The image will only appear once, but it might require action from the user – Timmy O'Mahony Apr 11 '12 at 11:52

1 Answers1

12

Different email clients choose to render multipart/mixed messages in different ways.

Most clients choose to render each part (in a "multipart" message) inline – in the order they were added to the email. However, if an image is referred to in a text/html part, most clients don't display that image again later on as part of the "inlining all parts" process.

Apple Mail on OSX and iOS are different, in so far as they will display each part in a multipart/mixed message in the order they were included, regardless of any inner references between HTML and images. This results in your images being displayed once within your HTML, and again at the end of the message where they've been inlined automatically.

The solution is to group your HTML and image assets into a single related part. i.e.:

from django.core.mail import EmailMultiAlternatives
from email.mime.image import MIMEImage
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText

# HTML + image container 
related = MIMEMultipart("related")

# Add the HTML
html = MIMEText('an image: <img src="cid:some_image"/>', "html")
related.attach(html)

# Add an image
with open("icon.png", "rb") as handle:
    image = MIMEImage(handle.read())
image.add_header("Content-ID", "<some_image>")
image.add_header("Content-Disposition", "inline")
related.attach(image)

# top level container, defines plain text version
email = EmailMultiAlternatives(subject="demo", body="plain text body",
                               from_email="foo@example.com",
                               to=["bar@example.com"])
# add the HTML version
email.attach(related)

# Indicate that only one of the two types (text vs html) should be rendered
email.mixed_subtype = "alternative"
email.send()
bradley.ayers
  • 37,165
  • 14
  • 93
  • 99