base64-codierte Bilder in E-Mail-Signaturen

94

Ich muss einige Bilder (Firmenlogos usw.) in E-Mail-Signaturen einfügen. Ich hatte alle möglichen Probleme mit den eingebetteten Bildern, die vom betreffenden E-Mail-System erstellt wurden (sie werden im Allgemeinen als Anhänge gesendet) und als verknüpfte Bilder (die die Erlaubnis erfordern, sie in der empfangenen E-Mail anzuzeigen).

Ich habe gerade eine E-Mail von Exchange gesehen, die eine base64-Bilddarstellung des Logos enthält und ein Tag für die Anzeige verwendet. Ich suche nach Informationen darüber, wie ich dies nach Möglichkeit in einer E-Mail-Signatur tun kann (wie generiere ich zunächst die base64-Version des Logos und welchen Code benötige ich, damit es funktioniert)?

Ich habe einfache Dinge wie ausprobiert 

<body>
<span>
<img src=.... >
</span>
</body>

Aber alles, was ich bekomme, ist der Alternativtext, also mache ich hier offensichtlich etwas falsch.

html image email base64 Peter Nunn
quelle
Mögliches Duplikat von Einbetten von Bildern in E-Mails
james.garriss

Antworten:

63

Wichtig

Meine Antwort unten zeigt, wie Bilder mithilfe von Daten-URIs eingebettet werden. Dies ist nützlich für das Web, funktioniert jedoch für die meisten E-Mail-Clients nicht zuverlässig . Lesen Sie für E-Mail-Zwecke unbedingt die Antwort von Shadow2531 .

Base-64-Daten sind in einem imgTag legal, und ich glaube, Ihre Frage ist, wie ein solches Image-Tag richtig eingefügt werden kann.

Sie können ein Online-Tool oder einige Codezeilen verwenden, um die 64-Zeichenfolge zu generieren.

Die Syntax zum Quellen des Bildes aus Inline-Daten lautet:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

http://en.wikipedia.org/wiki/Data_URI_scheme

Tim Medora
quelle
14
Versuchte dies, aber Google Mail scheint es nicht zu unterstützen. Die Lösung für eingebettete Anhänge scheint jedoch zu funktionieren.
Indrek
Hallo Tim, es wäre eine große Hilfe, wenn Sie einige Eingaben auf stackoverflow.com/questions/11124540/… bereitstellen könnten . Danke im Voraus. Eine andere Sache ist es eine Auflösung, so dass Mail-Domain wie Yahoo, Google Mail auch Ihre Lösung unterstützen
M Sach
1
Ich denke, Anhänge (wie die Lösung von @ Shadow2531) sind möglicherweise die am weitesten verbreitete Lösung, aber die einzige Möglichkeit, dies zu wissen, besteht darin, mehrere wichtige E-Mail-Clients mit unterschiedlichen Sicherheitseinstellungen zu testen. Eine weitere Komplikation besteht darin, dass Sie E-Mails sowohl im Internet als auch bei einer Vielzahl von Kunden empfangen können. Beispielsweise verhält sich Google Mail im Web möglicherweise anders als in Outlook oder Thunderbird.
Tim Medora
Überprüfen Sie diesen Link für die Unterstützung für die Verwendung dieser Technik in Mail - Clients campaignmonitor.com/blog/post/3927/... (tl; dr eine gewisse Unterstützung , aber inkonsequent, besonders in Outlook)
David Clarke
5
Ist das Einbetten für die meisten E-Mail-Clients im Jahr 2016 immer noch unzuverlässig?
Eirik Birkeland
128

Das Bild sollte als Anhang wie folgt in die Nachricht eingebettet werden:

--boundary
Content-Type: image/png; name="sig.png"
Content-Disposition: inline; filename="sig.png"
Content-Transfer-Encoding: base64
Content-ID: <0123456789>
Content-Location: sig.png

base64 data

--boundary

Und der HTML-Teil würde das Bild folgendermaßen referenzieren:

<img src="cid:0123456789">

In einigen Clients funktioniert auch src = "sig.png".

Grundsätzlich hätten Sie eine mehrteilige / gemischte, mehrteilige / alternative, mehrteilige / verwandte Nachricht, in der sich der Bildanhang im verwandten Teil befindet.

Clients sollten dieses Image auch nicht blockieren, da es nicht remote ist.

Oder hier ist ein mehrteiliges / alternatives, mehrteiliges / verwandtes Beispiel als mbox-Datei (als Windows-Zeilenumbruchformat speichern und am Ende eine Leerzeile einfügen. Verwenden Sie keine Erweiterung oder die Erweiterung .mbs):

From 
From: [email protected]
To: to@example.com
Subject: HTML Messages with Embedded Pic in Signature
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="alternative_boundary"

This is a message with multiple parts in MIME format.

--alternative_boundary
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 8bit

test

-- 
[Picture of a Christmas Tree]

--alternative_boundary
Content-Type: multipart/related; boundary="related_boundary"

--related_boundary
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 8bit

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>test</p>
        <p class="sig">-- <br><img src="cid:0123456789"></p>
    </body>
</html>

--related_boundary
Content-Type: image/png; name="sig.png"
Content-Disposition: inline; filename="sig.png"
Content-Location: sig.png
Content-ID: <0123456789>
Content-Transfer-Encoding: base64

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
cHkgSG9saWRheXMgUGFnZQA7

--related_boundary--

--alternative_boundary--

Sie können dies in Sylpheed oder Thunderbird (mit der Erweiterung Import / Export tools) oder den in Opera integrierten Mail-Client importieren. In Opera können Sie dann beispielsweise "Nur Text bevorzugen" umschalten, um den Unterschied zwischen HTML- und Textversion zu erkennen. Wie auch immer, Sie werden sehen, dass die HTML-Version das eingebettete Bild in der Signatur verwendet.

Shadow2531
quelle
Es wäre eine große Hilfe, wenn Sie einige Eingaben unter stackoverflow.com/questions/11124540/… bereitstellen könnten .
M Sach
@MSach Werde mal schauen, wenn ich eine Chance bekomme.
Shadow2531
4
Kannst du mir bei Shadow2531 sagen, wohin der mehrteilige / verwandte Code gehen wird? soll es in der gleichen HTML-Datei sein?
Faisal Ashfaq
1
"so" ... wie was? Ich bin bei Faisal, wie bringen Sie das in Ihre Nachricht ?
Devil's Advocate
1
Okay, dieser Kommentar hat mein Verständnis erschüttert. Ich habe eine HTM-Datei erstellt und sie dann in Outlook geladen. Ich habe dann die Funktion "Bild ersetzen" der Signatureditoren verwendet, um eine lokale Datei auszuwählen (anstelle des Base64-codierten Bildes, das ich manuell eingefügt hatte). Dies scheint zu tun, was du meinst. Danke, dass du bei mir bleibst.
Devil's Advocate
2

Vor kurzem hatte ich das gleiche Problem, QR-Bild / PNG in E-Mail aufzunehmen. Das QR-Bild ist ein Byte-Array, das mit ZXing generiert wird. Wir möchten es nicht in einer Datei speichern, da das Speichern / Lesen aus einer Datei zu teuer (langsam) ist. Die beiden obigen Antworten funktionieren also nicht für mich. Folgendes habe ich getan, um dieses Problem zu lösen:

import javax.mail.util.ByteArrayDataSource;
import org.apache.commons.mail.ImageHtmlEmail;
...
ImageHtmlEmail email = new ImageHtmlEmail();
byte[] qrImageBytes = createQRCode(); // get your image byte array
ByteArrayDataSource qrImageDataSource = new ByteArrayDataSource(qrImageBytes, "image/png");
String contentId = email.embed(qrImageDataSource, "QR Image");

Angenommen, die contentId lautet "111122223333", dann sollte Ihr HTML-Teil Folgendes haben:

<img src="cid: 111122223333">

Das Byte-Array muss nicht in Base64 konvertiert werden, da Commons Mail die Konvertierung automatisch für Sie durchführt. Hoffe das hilft.

JerryP
quelle