it-swarm.com.de

bild in HTML-E-Mail einbetten

Ich versuche eine multipart/verwandte HTML-E-Mail mit eingebetteten GIF-Bildern zu senden. Diese E-Mail wird mit Oracle PL/SQL generiert. Meine Versuche sind fehlgeschlagen, das Bild wurde als rotes X angezeigt (in Outlook 2007 und Yahoo Mail).

Ich habe schon seit einiger Zeit HTML-E-Mails verschickt, aber jetzt muss ich mehrere GIF-Bilder in der E-Mail verwenden. Ich kann diese auf einem unserer Webserver speichern und einfach mit ihnen verknüpfen. Viele E-Mail-Clients werden jedoch nicht automatisch angezeigt und müssen entweder die Einstellungen ändern oder sie für jede E-Mail manuell herunterladen.

Meine Gedanken sind also, das Bild einzubetten. Meine Fragen sind:

  1. Was mache ich hier falsch?
  2. Ist der Einbettungsansatz der richtige?
  3. Gibt es noch andere Optionen, wenn ich mehr und mehr Bilder verwenden muss? Anhänge funktionieren nicht, da es sich bei den Bildern normalerweise um Logos und Symbole handelt, die aus dem Kontext der Nachricht keinen Sinn ergeben. Einige Elemente der E-Mail sind auch Links zu einem Online-System. Das Erstellen eines statischen PDF und Anhängen funktioniert (meines Wissens sowieso nicht).

schnipsel:

MIME-Version: 1.0
To: [email protected]
BCC: [email protected]
From: [email protected]
Subject: Test
Reply-To: [email protected]
Content-Type: multipart/related; boundary="a1b2c3d4e3f2g1"

--a1b2c3d4e3f2g1

content-type: text/html;

    <html>
    <head><title>My title</title></head>
    <body>
    <div style="font-size:11pt;font-family:Calibri;">
    <p><IMG SRC="cid:my_logo" alt="Logo"></p>

... more html here ...

</div></body></html> 

--a1b2c3d4e3f2g1

Content-Type: image/gif;
Content-ID:<my_logo>
Content-Transfer-Encoding: base64
Content-Disposition: inline

[base64 image data here]

--a1b2c3d4e3f2g1--

Danke vielmals.

BTW: Ja, ich habe bestätigt, dass die base64-Daten korrekt sind, da ich das Bild in die HTML-Datei selbst einbetten kann (wobei derselbe Algorithmus zum Erstellen von Kopfdaten verwendet wird) und das Bild in Firefox/IE angezeigt wird.

Ich sollte auch beachten, dass dies NICHT für Spam ist. Die E-Mails werden an bestimmte Kunden gesendet, die dies täglich erwarten. Der Inhalt ist datengesteuert und keine Werbung.

85
tbone

Versuchen Sie, es direkt einzufügen. Auf diese Weise können Sie mehrere Bilder an verschiedenen Stellen in der E-Mail einfügen.

<img src="data:image/jpg;base64,{{base64-data-string here}}" />

Und um diesen Beitrag für andere nützlich zu machen: Wenn Sie keine base64-Datenzeichenfolge haben, erstellen Sie einfach eine unter: http://www.motobit.com/util/base64-decoder -encoder.asp aus einer Bilddatei.

E-Mail-Quellcode sieht in etwa so aus, aber ich kann Ihnen wirklich nicht sagen, wozu diese Grenzsache dient:

 To: [email protected]
 Subject: ...
 Content-Type: multipart/related;
 boundary="------------090303020209010600070908"

This is a multi-part message in MIME format.
--------------090303020209010600070908
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
  </head>
  <body bgcolor="#ffffff" text="#000000">
    <img src="cid:part1.06090408.01060107" alt="">
  </body>
</html>

--------------090303020209010600070908
Content-Type: image/png;
 name="moz-screenshot.png"
Content-Transfer-Encoding: base64
Content-ID: <part1.06090408.01060107>
Content-Disposition: inline;
 filename="moz-screenshot.png"

[base64 image data here]

--------------090303020209010600070908--

// BEARBEITEN: Oh, mir ist gerade klar, wenn Sie den ersten Code-Ausschnitt aus meinem Post einfügen, um eine E-Mail mit Thunderbird zu schreiben, ändert Thunderbird den HTML-Code automatisch so, dass er genau so aussieht wie der zweite Code in meinem Post.

114
Bernd

Die andere Lösung fügt das Bild als Anhang hinzu und referenziert den HTML-Code mit cid.

HTML Quelltext:

<html>
    <head>
    </head>
    <body>
        <img width=100 height=100 id=""1"" src=""cid:Logo.jpg"">
    </body>
</html>

C # -Code:

EmailMessage email = new EmailMessage(service);
email.Subject = "Email with Image";
email.Body = new MessageBody(BodyType.HTML, html);
email.ToRecipients.Add("[email protected]");
string file = @"C:\Users\acv\Pictures\Logo.jpg";
email.Attachments.AddFileAttachment("Logo.jpg", file);
email.Attachments[0].IsInline = true;
email.Attachments(0).ContentId = "Logo.jpg";
email.SendAndSaveCopy();
14
Khyati Elhance

Ich finde keine der Antworten hier nützlich, deshalb gebe ich meine Lösung.

  1. Das Problem ist, dass Sie multipart/related als Inhaltstyp verwenden, der in diesem Fall nicht geeignet ist. Ich benutze multipart/mixed und darin multipart/alternative (es funktioniert auf den meisten Clients).

  2. Die Nachrichtenstruktur sollte wie folgt aussehen: 

    [Headers]
    Content-type:multipart/mixed; boundary="boundary1"
    --boundary1
    Content-type:multipart/alternative; boundary="boundary2"
    --boundary2
    Content-Type: text/html; charset=ISO-8859-15
    Content-Transfer-Encoding: 7bit
    [HTML code with a href="cid:..."]
    
    --boundary2
    Content-Type: image/png;
    name="moz-screenshot.png"
    Content-Transfer-Encoding: base64
    Content-ID: <part1.06090408.01060107>
    Content-Disposition: inline; filename="moz-screenshot.png"
    [base64 image data here]
    
    --boundary2--
    --boundary1--
    

Dann wird es klappen 

9
Pavel Perna

Wenn dies nicht funktioniert, können Sie eines dieser Tools ausprobieren, das das Bild in eine HTML-Tabelle konvertiert (beachten Sie jedoch die Größe des Bildes):

6
Erwin Mayer

Die Verwendung von Base64 zum Einbetten von Bildern in HTML ist fantastisch. Beachten Sie jedoch, dass base64-Strings Ihre E-Mail-Größe stark machen können. 

Deshalb, 

1) Wenn Sie über viele Bilder verfügen, können Sie durch das Hochladen Ihrer Bilder auf einen Server und das Laden dieser Bilder vom Server die E-Mail-Größe verringern. (Sie können viele kostenlose Dienste über Google erhalten.)

2) Wenn Ihre Mail nur wenige Bilder enthält, ist die Verwendung von base64-Strings definitiv eine großartige Option.

Neben den Auswahlmöglichkeiten vorhandener Antworten können Sie auch einen Befehl zum Generieren einer base64-Zeichenfolge unter Linux verwenden:

base64 test.jpg
4
Brian
  1. Sie benötigen 3 Grenzen, damit Inline-Bilder vollständig kompatibel sind.

  2. Alles geht in den multipart/mixed.

  3. Verwenden Sie dann den multipart/related, um Ihren multipart/alternative und Ihre Bildanhang-Header zu enthalten.

  4. Fügen Sie schließlich Ihre herunterladbaren Anhänge in die letzte Begrenzung von multipart/mixed ein.

1
Steven Newman

Es gibt einen sehr guten Blogbeitrag, in dem die Vor- und Nachteile von drei verschiedenen Herangehensweisen von Martyn Davies aufgelistet sind. Sie können es unter https://sendgrid.com/blog/embedding-images-emails-facts/ lesen.

Ich möchte einen vierten Ansatz mit CSS-Hintergrundbildern hinzufügen.

Hinzufügen

<div id="myImage"></div>

zu Ihrem E-Mail-Body und einer CSS-Klasse wie:

#myImage {
    background-image:  url('data:image/png;base64,iVBOR...[some more encoding]...rkggg==');
    width: [the-actual-image-width];
    height: [the-actual-image-height];
}
1
GerardV

Es kann von Interesse sein, dass sowohl Outlook als auch Outlook Express diese mehrteiligen Bild-E-Mail-Formate generieren können, wenn Sie die Bilddateien mit der Menüfunktion Einfügen/Bild einfügen.

Natürlich muss der E-Mail-Typ auf HTML (nicht Klartext) eingestellt sein.

Jede andere Methode (z. B. Ziehen/Ablegen oder ein Aufruf über die Befehlszeile) führt dazu, dass das Bild bzw. die Bilder als Anhang gesendet werden.

Wenn Sie dann eine solche E-Mail an sich selbst senden, können Sie sehen, wie sie formatiert ist! :)

FWIW, ich bin auf der Suche nach einer eigenständigen Windows-Programmdatei, die Inline-Images vom Befehlszeilenmodus aus ausführt, aber es scheint keine zu geben. Es ist ein Pfad, den viele gegangen sind ... Man kann das mit Outlook Express tun, indem man eine entsprechend formatierte EML-Datei übergibt.

1
Peter

Ich weiß, dass dies ein alter Beitrag ist, aber die aktuellen Antworten betreffen nicht die Tatsache, dass Outlook und viele andere E-Mail-Anbieter keine Inline-Bilder oder CID-Bilder unterstützen. Die effektivste Möglichkeit, Bilder in E-Mails zu platzieren, besteht darin, sie online zu hosten und in der E-Mail einen Link darauf zu setzen. Bei kleinen E-Mail-Listen funktioniert eine öffentliche Dropbox gut. Dies hält auch die E-Mail-Größe gering.

1

Im Folgenden wird Code beschrieben, mit dem dies auf zwei Arten erreicht werden kann:

using System;
using Outlook = Microsoft.Office.Interop.Outlook;

namespace ConsoleApp2
{
    class Program
    {
        static void Main(string[] args)
        {

            Method1();
            Method2();
        }

        public static void Method1()
        {
            Outlook.Application outlookApp = new Outlook.Application();
            Outlook.MailItem mailItem = outlookApp.CreateItem(Outlook.OlItemType.olMailItem);
            mailItem.Subject = "This is the subject";
            mailItem.To = "[email protected]";
            string imageSrc = "D:\\Temp\\test.jpg"; // Change path as needed

            var attachments = mailItem.Attachments;
            var attachment = attachments.Add(imageSrc);
            attachment.PropertyAccessor.SetProperty("http://schemas.Microsoft.com/mapi/proptag/0x370E001F", "image/jpeg");
            attachment.PropertyAccessor.SetProperty("http://schemas.Microsoft.com/mapi/proptag/0x3712001F", "myident"); // Image identifier found in the HTML code right after cid. Can be anything.
            mailItem.PropertyAccessor.SetProperty("http://schemas.Microsoft.com/mapi/id/{00062008-0000-0000-C000-000000000046}/8514000B", true);

            // Set body format to HTML

            mailItem.BodyFormat = Outlook.OlBodyFormat.olFormatHTML;
            string msgHTMLBody = "<html><head></head><body>Hello,<br><br>This is a working example of embedding an image unsing C#:<br><br><img align=\"baseline\" border=\"1\" hspace=\"0\" src=\"cid:myident\" width=\"\" 600=\"\" hold=\" /> \"></img><br><br>Regards,<br>Tarik Hoshan</body></html>";
            mailItem.HTMLBody = msgHTMLBody;
            mailItem.Send();
        }

        public static void Method2()
        {

            // Create the Outlook application.
            Outlook.Application outlookApp = new Outlook.Application();

            Outlook.MailItem mailItem = (Outlook.MailItem)outlookApp.CreateItem(Outlook.OlItemType.olMailItem);

            //Add an attachment.
            String attachmentDisplayName = "MyAttachment";

            // Attach the file to be embedded
            string imageSrc = "D:\\Temp\\test.jpg"; // Change path as needed

            Outlook.Attachment oAttach = mailItem.Attachments.Add(imageSrc, Outlook.OlAttachmentType.olByValue, null, attachmentDisplayName);

            mailItem.Subject = "Sending an embedded image";

            string imageContentid = "someimage.jpg"; // Content ID can be anything. It is referenced in the HTML body

            oAttach.PropertyAccessor.SetProperty("http://schemas.Microsoft.com/mapi/proptag/0x3712001E", imageContentid);

            mailItem.HTMLBody = String.Format(
                "<body>Hello,<br><br>This is an example of an embedded image:<br><br><img src=\"cid:{0}\"><br><br>Regards,<br>Tarik</body>",
                imageContentid);

            // Add recipient
            Outlook.Recipient recipient = mailItem.Recipients.Add("[email protected]");
            recipient.Resolve();

            // Send.
            mailItem.Send();
        }
    }
}
0
Tarik

Für diejenigen, die keine dieser Lösungen erhalten konnten: Senden eines Inline-Bildes in E-Mail Durch Befolgen der in der von @ T30 angebotenen Lösung beschriebenen Schritte konnte ich mein Inline-Bild anzeigen, ohne es zu sein von Outlook blockiert (vorherige Methoden wurden blockiert). Wenn Sie den Austausch wie wir verwenden, dann auch: 

service = new ExchangeService(ExchangeVersion);
service.AutodiscoverUrl("[email protected]");
SmtpClient smtp = new SmtpClient(service.Url.Host);

sie müssen Ihre Exchange-Service-URL-Host übergeben. Abgesehen von der folgenden Lösung sollten Sie eingebettete Bilder einfach senden können.

0
tstrand66