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: from@example.com
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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.