osadzanie obrazu w e-mailu html

113

Próbuję wysłać wieloczęściową / pokrewną wiadomość e-mail w formacie HTML z osadzonymi obrazami gif. Ten e-mail jest generowany przy użyciu Oracle PL / SQL. Moje próby nie powiodły się, a obraz jest wyświetlany jako czerwony znak X (w programie Outlook 2007 i poczcie yahoo)

Od jakiegoś czasu wysyłam e-maile w formacie html, ale teraz wymagam użycia kilku obrazów gif w e-mailu. Mogę je przechowywać na jednym z naszych serwerów internetowych i po prostu łączyć się z nimi, ale wielu klientów poczty e-mail nie wyświetla ich automatycznie i będą musieli zmienić ustawienia lub ręcznie pobrać je dla każdego e-maila.

Więc myślę o osadzeniu obrazu. Moje pytania to:

Co ja tu robię źle?
Czy podejście osadzania jest właściwe?
Czy są jakieś inne opcje, jeśli muszę używać coraz więcej obrazów? Załączniki nie będą działać, ponieważ obrazy to zazwyczaj logo i ikony, które nie mają sensu w kontekście wiadomości. Ponadto niektóre elementy wiadomości e-mail są odsyłaczami do systemu online, więc generowanie statycznego pliku PDF i załączanie go nie będzie działać (i tak o ile wiem).

skrawek:

MIME-Version: 1.0
To: me@gmail.com
BCC: me@yahoo.com
From: email@yahoo.com
Subject: Test
Reply-To: email@yahoo.com
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--

Wielkie dzięki.

BTW: Tak, zweryfikowałem, że dane base64 są poprawne, ponieważ mogę osadzić obraz w samym html (używając tego samego algo do tworzenia danych nagłówka) i zobaczyć obraz w przeglądarce Firefox / IE.

Powinienem również zauważyć, że NIE jest to spam, e-maile są wysyłane do określonych klientów, którzy oczekują go codziennie. Treść jest oparta na danych, a nie reklamach.

html image oracle email mime tbone
źródło

Szybkie pytanie: czy udostępniasz te obrazy poza witryną, czy też umieszczasz je bezpośrednio w wiadomości e-mail?

JonLim,

Część mojego pytania naprawdę mogę zrobić. Próbuję je tutaj osadzić, ale bezskutecznie. Jeśli podam link do nich, wielu użytkowników nie zobaczy obrazów bez ich wcześniejszego pobrania, czego chciałbym uniknąć.

tbone

1

Zwykły <img src="URL" />działał dla mnie, ale był to obraz, który umieściłem na serwerze. To ci nie pasuje?

JonLim,

„działa” jest subiektywne ... tak, działa, jeśli użytkownik chce pobrać obrazy za każdym razem, ale chciałbym tego uniknąć i osadzić obraz.

tbone

1

@JonLim: dzięki za przyjrzenie się temu, zobacz moje komentarze w odpowiedzi na to, czego mi brakowało.

tbone

139

Spróbuj wstawić go bezpośrednio, w ten sposób możesz wstawić wiele obrazów w różnych miejscach w e-mailu.

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

I aby ten post był przydatny dla innych, aby: Jeśli nie masz ciągu danych base64, utwórz go łatwo pod adresem : http://www.motobit.com/util/base64-decoder-encoder.asp z pliku obrazu .

Kod źródłowy wiadomości e-mail wygląda mniej więcej tak, ale naprawdę nie mogę powiedzieć, do czego służy ta granica:

 To: email@email.de
 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--

// EDYCJA: Och, po prostu zdaję sobie sprawę, że jeśli wstawisz pierwszy fragment kodu z mojego postu, aby napisać wiadomość e-mail za pomocą thunderbirda, thunderbird automatycznie zmieni kod HTML, aby wyglądał prawie tak samo jak drugi kod w moim poście.

Bernd
źródło

5

próbowałem najpierw tego, nie działa dla mnie w przypadku poczty e-mail. działa dobrze do przeglądania w IE / Firefox, ale nie jest wysyłany jako e-mail.

tbone

Być może znasz sposób (jaki byłby typ zawartości? Text / html? Nagłówki e-maili, które muszę wiedzieć, aby wysłać mieszany plik HTML / obraz w ten sposób)

tbone.

1

@Zesty użyj @ [nazwa użytkownika], aby kogoś ostrzec, właśnie zobaczyłem Twoje pytanie. Używam utl_smtp. Dla mnie musiałem stworzyć clob z treścią html, granicami itp., A następnie wysłać przez utl_smtp. Zobacz tutaj, aby zapoznać się z prostym przykładem: oracle-base.com/articles/misc/EmailFromOraclePLSQL.php Zauważ, że ten link nie pokazuje podejścia do osadzonych obrazów, ale zawiera szczegóły, które pomogą Ci przejść.

tbone

41

Identyfikatory URI danych w wiadomościach e-mail nie są obsługiwane w wielu popularnych klientach i nie powinny być używane, patrz: campaignmonitor.com/blog/post/3927/ ...

Michael Böckling

2

Wygląda na to, że nie działa w hotmail / icloud = (czy coś przegapiłem

hsb1007

22

Innym rozwiązaniem jest dołączenie obrazu jako załącznika, a następnie odwołanie się do niego w kodzie html za pomocą cid.

Kod HTML:

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

Kod C #:

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

Khyati Elhance
źródło

11

Żadna z odpowiedzi nie jest dla mnie przydatna, więc przedstawiam moje rozwiązanie.

Problem polega na tym, że używasz multipart/relatedjako typu zawartości, co w tym przypadku nie jest dobre. Używam multipart/mixedi wewnątrz multipart/alternative(działa na większości klientów).

Struktura wiadomości powinna wyglądać następująco:

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

Wtedy zadziała

Pavel Perna
źródło

Walczę o to. Zakodowałem dokładnie tak, jak powyżej, ale obraz się nie pojawia (tylko ramka z tekstem alternatywnym; tekst działa dobrze). Mój Content-ID to <filename.jpg>, więc mój href = "cid: filename.jpg" - czy jest jakaś specjalna sztuczka dotycząca wartości lub składni Content-ID i cid:?

Peter Flynn,

Sprawdziłem z RFC2392 i wyrażenie CID wydaje się być prawidłowe. Ale nadal się nie wyświetla.

Peter Flynn

Napisałem odpowiedź na podobne pytanie i stworzyłem sztukę ascii, aby wyjaśnić strukturę: stackoverflow.com/a/40420648/633961

guettli

10

Jeśli to nie zadziała, możesz wypróbować jedno z tych narzędzi, które konwertują obraz na tabelę HTML (jednak uważaj na rozmiar obrazu):

Erwin Mayer
źródło

10

img2hmtl to najbardziej zwariowane rozwiązanie / pomysł, jaki widziałem od jakiegoś czasu. +1

Kristjan Liiva

4

Używanie Base64 do osadzania obrazów w html jest niesamowite. Niemniej jednak proszę zauważyć, że ciągi base64 mogą zwiększyć rozmiar wiadomości e-mail.

W związku z tym,

1) Jeśli masz wiele obrazów, przesłanie ich na serwer i załadowanie tych obrazów z serwera może zmniejszyć rozmiar wiadomości e-mail. (Możesz uzyskać wiele bezpłatnych usług za pośrednictwem Google)

2) Jeśli w twojej poczcie jest tylko kilka obrazków, użycie łańcuchów base64 jest zdecydowanie świetną opcją.

Oprócz opcji dostępnych w istniejących odpowiedziach możesz również użyć polecenia do wygenerowania ciągu base64 w systemie Linux:

base64 test.jpg

Brian
źródło

Wskazany przez Michaela Böcklinga: identyfikatory URI danych w wiadomościach e-mail nie są obsługiwane w wielu popularnych klientach, takich jak Gmail

Mendy

3

Wiem, że to stary post, ale obecne odpowiedzi nie uwzględniają faktu, że program Outlook i wielu innych dostawców poczty e-mail nie obsługuje obrazów wbudowanych ani obrazów CID. Najskuteczniejszym sposobem umieszczania obrazów w wiadomościach e-mail jest udostępnianie ich online i umieszczanie linku do nich w wiadomości e-mail. W przypadku małych list e-mailowych publiczna skrzynka referencyjna działa dobrze. Zmniejsza to również rozmiar wiadomości e-mail.

Skuter Crawford
źródło

2

Aby obrazy w treści były w pełni zgodne, potrzebujesz 3 granic.
Wszystko trafia do multipart/mixed.
Następnie użyj, multipart/relatedaby zawrzeć swój multipart/alternativei twój obraz załącznika nagłówki.
Na koniec umieść załączniki do pobrania w ostatniej granicy multipart/mixed.

Steven Newman
źródło

11

Byłoby pomocne, gdybyś dołączył przykład.

Makyen

7

Jeszcze bardziej przydatne byłoby odniesienie do specyfikacji.

jbruni

2

W rzeczywistości istnieje bardzo dobry wpis na blogu, który wymienia zalety i wady trzech różnych podejść do tego problemu autorstwa Martyn Davies. Możesz go przeczytać na https://sendgrid.com/blog/embedding-images-emails-facts/ .

Chciałbym dodać czwarte podejście wykorzystujące obrazy tła CSS.

Dodaj

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

do treści wiadomości e-mail i klasy css, takiej jak:

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

GerardV
źródło

2

Dla tych, którzy nie mogli uruchomić jednego z tych rozwiązań: Wyślij obraz w wiadomości e-mail Postępując zgodnie z krokami przedstawionymi w rozwiązaniu oferowanym przez @ T30, udało mi się wyświetlić mój obraz w tekście bez blokowania go przez Outlooka (poprzednie metody były blokowane) . Jeśli korzystasz z wymiany, tak jak my, wtedy również:

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

będziesz musiał przekazać go hostowi adresu URL usługi wymiany. Poza tym, zastosowanie tego rozwiązania powinno umożliwić łatwe wysyłanie osadzonych obrazów.

tstrand66
źródło

1

Może być interesujące, że zarówno Outlook, jak i Outlook Express mogą generować te wieloczęściowe formaty wiadomości e-mail, jeśli wstawisz pliki obrazów za pomocą funkcji menu Wstaw / Obraz.

Oczywiście typ wiadomości e-mail musi być ustawiony na HTML (nie jako zwykły tekst).

Każda inna metoda (np. Przeciągnij / upuść lub dowolne wywołanie wiersza poleceń) powoduje wysłanie obrazu (ów) jako załącznika.

Jeśli wyślesz taki e-mail do siebie, zobaczysz, jak jest sformatowany! :)

FWIW, szukam samodzielnego pliku wykonywalnego systemu Windows, który wykonuje obrazy w wierszu z trybu wiersza poleceń, ale wydaje się, że nie ma. To ścieżka, którą przeszło wielu ... Można to zrobić, powiedzmy, Outlook Express, przekazując mu odpowiednio sformatowany plik .eml.

Piotr
źródło

0

Poniżej znajduje się działający kod z dwoma sposobami osiągnięcia tego:

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

Tarik
źródło

0

Dodatkowa wskazówka do posta Pavela Perny, która bardzo mi pomogła (nie mogę komentować mojej reputacji, dlatego zamieszczam to jako odpowiedź): W niektórych wersjach Microsoft Exchange, dyspozycja zawartości w treści jest usuwana ( zobacz ten post Microsoft ). Obraz po prostu nie jest częścią poczty, którą użytkownik widzi w Outlooku. Aby obejść ten problem, użyj opcji „Dyspozycja zawartości: załącznik”. Outlook 2016 nie wyświetla obrazów jako załączników, które są używane w wiadomości e-mail, chociaż używają one opcji „Dyspozycja treści: załącznik”.

Klendatho
źródło

-31

Jeśli używasz programu Outlook do wysyłania statycznego obrazu z hiperłączem, prostym sposobem byłoby użycie programu Word.

Otwórz MS Word
Skopiuj obraz na pustą stronę
Dodaj hiperłącze do obrazu (Ctrl + K)
Skopiuj obraz do wiadomości e-mail

Claudio Viz
źródło

osadzanie obrazu w e-mailu html

Odpowiedzi: