Anzeigen von Inline-Bildern auf dem iPhone, iPad

Question

Ich versuche, eine E-Mail in Django mit Inline-Bildern zu erstellen.

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() 

Und in der Vorlage würde ich es wie so Referenz:

<img src="cid:image1" /> 

Dies funktioniert gut in Web-Browsern, Outlook, Thunderbird ... alle mit Ausnahme des Apfel-Mail-Client auf OSX, iPad und iPhone. Die Bilder werden zweimal angezeigt. Sie sind inline richtig platziert, aber sie sind auch an den unteren Rand der E-Mail angehängt. Meine Frage ist, wie kann ich die Bilder unten loswerden? oder sollte ich Bilder in E-Mails anders ansprechen?

Referenzen:
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

Answer 1

Verschiedene E-Mail-Clients wählen multipart/mixed Nachrichten auf unterschiedliche Weise zu machen.

Die meisten Clients entscheiden sich dafür, jedes Teil (in einer "Multipart" -Nachricht) inline darzustellen - in der Reihenfolge, in der sie der E-Mail hinzugefügt wurden. Jedoch wird, wenn ein Bild in einem text/html-Teil bezeichnet wird, die meisten Clients dieses Bild später nicht wieder als Teil des Prozesses "Inlining alle Teile" anzeigen.

Apple Mail auf OSX und iOS sind unterschiedlich, soweit sie wird Anzeigen jedes Teil in einer multipart/mixed Nachricht in der Reihenfolge, wie sie aufgenommen wurden, unabhängig von irgendwelchen inneren Bezügen zwischen HTML und Bildern. Dies führt dazu, dass Ihre Bilder in Ihrem HTML-Code und am Ende der Nachricht, an der sie automatisch inline eingefügt wurden, einmal angezeigt werden.

Die Lösung besteht darin, Ihre HTML-und Bild-Assets in einem einzigen related Teil zu gruppieren. Beispiel:

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()