afbeelding insluiten in html-e-mail

Ik probeer een meerdelige/gerelateerde HTML-e-mail te verzenden met ingesloten gif-afbeeldingen. Deze e-mail wordt gegenereerd met Oracle PL/SQL. Mijn pogingen zijn mislukt, de afbeelding wordt weergegeven als een rode X (in Outlook 2007 en Yahoo Mail)

Ik verzend al een tijdje html-e-mails, maar mijn vereisten zijn nu om verschillende gif-afbeeldingen in de e-mail te gebruiken. Ik kan deze opslaan op een van onze webservers en er gewoon naar linken, maar veel e-mailclients van gebruikers zullen ze niet automatisch laten zien en zullen de instellingen moeten wijzigen of ze handmatig moeten downloaden voor elke e-mail.

Dus mijn gedachten zijn om de afbeelding in te sluiten. Mijn vragen zijn:

  1. Wat doe ik hier verkeerd?
  2. Is de inbeddingsaanpak de juiste?
  3. Zijn er nog andere opties als ik steeds meer afbeeldingen moet gebruiken? Bijlagen werken niet, omdat de afbeeldingen meestal logo’s en pictogrammen zijn die niet logisch zijn buiten de context van het bericht. Sommige elementen van de e-mail zijn ook koppelingen naar een online systeem, dus het genereren van een statische PDF en bijvoegen zal niet werken (in ieder geval voor zover ik weet).

fragment:

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

Hartelijk dank.

BTW: Ja, ik heb geverifieerd dat de basis64-gegevens correct zijn, omdat ik de afbeelding in de HTML zelf kan insluiten (met behulp van hetzelfde algo-gebruik voor het maken van header-gegevens) en zie afbeelding in Firefox / IE.

Ik moet ook opmerken dat dit niet voor spam is, de e-mails worden verzonden naar specifieke klanten die het dagelijks verwachten. De inhoud is gegevensgestuurd en geen advertenties.


Antwoord 1, Autoriteit 100%

Probeer het rechtstreeks in te voegen, op deze manier kunt u meerdere afbeeldingen op verschillende locaties in de e-mail invoegen.

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

en om dit paal nuttig voor anderen te maken om:
Als u geen BASE64-data-reeks hebt, maakt u een gemakkelijk op:
http://www.motobit.com/Util/base64-decoder-encoder.asp vanuit een afbeeldingsbestand.

E-mail broncode ziet er zoiets uit, maar ik kan je echt niet vertellen wat dat begrenzing is voor:

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

//EDIT: Oh, ik realiseer me net dat als je het eerste codefragment van mijn bericht invoegt om een e-mail te schrijven met Thunderbird, Thunderbird automatisch de html-code verandert om er ongeveer hetzelfde uit te zien als de tweede code in mijn bericht.


Antwoord 2, autoriteit 16%

De andere oplossing is om de afbeelding als bijlage bij te voegen en er vervolgens naar html-code te verwijzen met cid.

HTML-code:

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

Antwoord 3, autoriteit 9%

Ik vind geen van de antwoorden hier nuttig, dus ik geef mijn oplossing.

  1. Het probleem is dat je multipart/relatedals inhoudstype gebruikt, wat in dit geval niet goed is. Ik gebruik multipart/mixeden daarbinnen multipart/alternative(het werkt op de meeste clients).

  2. De berichtstructuur zou als volgt moeten zijn:

    [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--
    

Dan werkt het


Antwoord 4, Autoriteit 7%

Als het niet werkt, kunt u een van deze hulpmiddelen proberen die de afbeelding naar een HTML-tabel converteren (pas op de grootte van uw afbeelding):


Antwoord 5, Autoriteit 3%

GEBRUIKEN VAN BASE64 NAAR DE Beelden In HTML is geweldig. Merk niet op dat Base64-snaren uw e-mailgrootte groot kunnen maken.

Daarom,

1) Als u veel afbeeldingen hebt, kunt u uw afbeeldingen uploaden naar een server en het laden van die afbeeldingen van de server, uw e-mailgrootte kleiner maken. (U kunt veel gratis services krijgen via Google)

2) Als er slechts een paar afbeeldingen in uw e-mail zijn, is het gebruik van BASE64-snaren absoluut een geweldige optie.

Naast de keuzes van bestaande antwoorden, kunt u ook een opdracht gebruiken om een ​​BASE64-string op Linux te genereren:

base64 test.jpg

Antwoord 6, Autoriteit 3%

Ik weet dat dit een oude post is, maar de huidige antwoorden behandelen niet het feit dat Outlook en vele andere e-mailproviders inline afbeeldingen of CID-afbeeldingen niet ondersteunen. De meest effectieve manier om afbeeldingen in e-mails te plaatsen, is om het online te hosten en een link hierop te plaatsen in de e-mail. Voor kleine e-maillijsten werkt een openbare dropbox prima. Dit houdt ook de e-mailgrootte bij.


Antwoord 7, Autoriteit 2%

  1. U hebt 3 grenzen nodig voor inline afbeeldingen om volledig te compliant.

  2. Alles gaat in de multipart/mixed.

  3. Gebruik vervolgens de multipart/relatedom uw multipart/alternativeen uw beeldbevestigingskoppen te bevatten.

  4. Neem ten slotte uw downloadbare bijlagen in de laatste grens van multipart/mixed.


Antwoord 8, Autoriteit 2%

Voor degenen die geen van deze oplossingen kunnen krijgen die werken:
Verzend inline afbeelding in e-mail
Na de opgestelde stappen in de oplossing die wordt aangeboden door @ T30, was ik in staat om mijn inline-afbeelding te laten zien zonder te worden geblokkeerd door Outlook (eerdere methoden die het is geblokkeerd). Als u Exchange gebruikt, zoals wij dan ook bij het doen:

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

U moet deze uw wisselservice-URL-host doorgeven. Anders dan dat na deze oplossing moet u toestaan ​​om eenvoudig ingesloten imgages te verzenden.


Antwoord 9

Er is eigenlijk een heel goede blogpost die de voor- en nadelen van drie verschillende benaderingen van dit probleem van Martyn Davies opsomt. Je kunt het lezen op https://sendgrid.com/blog/embedding-images- emails-facts/.

Ik wil graag een vierde benadering toevoegen met behulp van CSS-achtergrondafbeeldingen.

Toevoegen

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

naar je e-mail en een CSS-klasse zoals:

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

Antwoord 10

Het kan interessant zijn dat zowel Outlook als Outlook Express deze meerdelige e-mailformaten voor afbeeldingen kunnen genereren, als u de afbeeldingsbestanden invoegt met behulp van de menufunctie Invoegen/Afbeelding.

Uiteraard moet het e-mailtype worden ingesteld op HTML (geen platte tekst).

Elke andere methode (bijv. slepen/neerzetten of een opdrachtregelaanroep) resulteert erin dat de afbeelding(en) als bijlage worden verzonden.

Als je vervolgens zo’n e-mail naar jezelf stuurt, kun je zien hoe deze is opgemaakt! 🙂

FWIW, ik ben op zoek naar een op zichzelf staand uitvoerbaar Windows-bestand dat inline-afbeeldingen doet vanuit de opdrachtregelmodus, maar die lijken er niet te zijn. Het is een pad dat velen zijn opgegaan… Men kan het doen met bijvoorbeeld Outlook Express, door er een correct opgemaakt .eml-bestand aan door te geven.


Antwoord 11

Het volgende is werkende code met twee manieren om dit te bereiken:

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

Antwoord 12

Een extra hint voor de post van Pavel Perna die me erg heeft geholpen (kan geen commentaar geven met mijn reputatie, daarom plaats ik dit als antwoord): In sommige versies van Microsoft Exchange is de inline inhoudsdispositie verwijderd (zie dit bericht van Microsoft). De afbeelding maakt gewoon geen deel uit van de e-mail die de gebruiker in Outlook ziet. Gebruik als tijdelijke oplossing in plaats daarvan “Content-Disposition: bijlage”. Outlook 2016 toont geen afbeeldingen als bijlage die in het e-mailbericht worden gebruikt, hoewel ze de “Content-Disposition: bijlage” gebruiken.


Antwoord 13

Probeer dat op te lossen met Context.Request:

<img width="150" height="60" src="@($"{Context.Request.Scheme}://{Context.Request.Host}{Context.Request.PathBase}/images/logo.png")" />

In mijn situatie, toen ik Content-ID gebruikte, had ik die afbeelding ook als bijlage, en dat was niet de beste oplossing.


Antwoord 14

Als u Outlook gebruikt om een statische afbeelding met hyperlink te verzenden, kunt u eenvoudig Word gebruiken.

  1. Open MS Word
  2. Kopieer de afbeelding naar een lege pagina
  3. Hyperlink aan de afbeelding toevoegen (Ctrl + K)
  4. Kopieer de afbeelding naar uw e-mail

Other episodes