html e-postasına resim yerleştirme

113

Gömülü gif resimleri içeren çok parçalı / ilgili html e-postası göndermeye çalışıyorum. Bu e-posta Oracle PL / SQL kullanılarak oluşturulmuştur. Denemelerim başarısız oldu, görüntü kırmızı bir X olarak görünüyor (Outlook 2007 ve yahoo postasında)

Bir süredir html e-postaları gönderiyorum, ancak gereksinimlerim şimdi e-postada birkaç gif resmi kullanmak. Bunları web sunucularımızdan birinde depolayabilir ve bunlara bağlanabilirim, ancak birçok kullanıcı e-posta istemcisi bunları otomatik olarak göstermeyecek ve her e-posta için ayarları değiştirmesi veya manuel olarak indirmesi gerekecek.

Yani, düşüncelerim resmi yerleştirmek. Sorularım:

  1. Burada neyi yanlış yapıyorum?
  2. Gömme yaklaşımı doğru mu?
  3. Daha fazla resim kullanmam gerekirse başka seçenek var mı? Resimler tipik olarak mesajın bağlamı dışında bir anlam ifade etmeyen logolar ve simgeler olduğundan ekler çalışmaz. Ayrıca, e-postanın bazı öğeleri çevrimiçi bir sisteme bağlantılardır, bu nedenle statik bir PDF oluşturmak ve eklemek işe yaramayacaktır (zaten bildiğim kadarıyla).

ön bilgi:

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

Çok teşekkürler.

BTW: Evet, görseli html'nin içine gömebildiğim için (başlık verisi oluşturmak için aynı algo kullanımını kullanarak) ve Firefox / IE'deki görüntüyü görebildiğim için base64 verilerinin doğru olduğunu doğruladım.

Bunun spam için OLMADIĞINI da not etmeliyim, e-postalar bunu günlük olarak bekleyen belirli müşterilere gönderilir. İçerik veriye dayalıdır ve reklam değildir.

html  image  oracle  email  mime 
— tbone
kaynak
Kısa soru: Bu resimleri site dışında mı barındırıyorsunuz yoksa doğrudan e-postaya mı yerleştiriyorsunuz?
— JonLim
Sorumun bir parçası gerçekten, ben de yapabilirim. Buraya onları yerleştirmeye çalışıyorum ama başarılı bir şekilde değil. Onlara sadece bağlantı kurarsam, birçok kullanıcı resimleri indirmeden görmez ki bunu önlemek isterim.
— tbone
1
Düzenli <img src="URL" />benim için çalıştı, ancak site dışında barındırdığım bir resimdi. Bu senin için çalışmıyor mu?
— JonLim
"çalışır" özneldir ... evet, kullanıcı her seferinde resimleri indirmeye istekliyse işe yarar, ancak bundan kaçınmak ve resmi yerleştirmek istiyorum.
— tbone
1
@JonLim: Buna baktığınız için teşekkürler, eksiklerimin cevabındaki yorumlarıma bakın.
— tbone

Yanıtlar:

139

Doğrudan eklemeye çalışın, bu şekilde e-postanın çeşitli yerlerine birden çok resim ekleyebilirsiniz.

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

Ve bu gönderiyi başkaları için yararlı bir şekilde yapmak için: Bir base64-data dizeniz yoksa, şu adreste kolayca bir tane oluşturun: http://www.motobit.com/util/base64-decoder-encoder.asp , bir görüntü dosyasından .

E-posta kaynak kodu şuna benzer, ancak bu sınırın ne için olduğunu size gerçekten söyleyemem:

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

// DÜZENLEME: Oh, anlıyorum ki, yazımdaki ilk kod parçacığını thunderbird ile bir e-posta yazmak için eklerseniz, thunderbird, yazımdaki ikinci kodla hemen hemen aynı görünmesi için html kodunu otomatik olarak değiştirir.

— Bernd
kaynak
5
önce bunu denedim, e-posta için benim için çalışmıyor. IE / Firefox'ta görüntülemek için iyi çalışıyor, ancak e-posta olarak gönderilmiyor.
— tbone
Belki bir yol biliyorsunuz (içerik türü ne olurdu? Text / html? Bu şekilde karışık bir html / resim dosyası göndermek için bilmem gereken e-posta başlıkları)
— tbone
1
@Zesty birisini uyarmak için @ [kullanıcı adı] kullanın, az önce sorunuzu gördüm. Utl_smtp kullanıyorum. Benim için html gövdesi, sınırları vb. İle bir clob oluşturmalı ve sonra utl_smtp ile göndermeliydim. Basit örnek için buraya bakın: oracle-base.com/articles/misc/EmailFromOraclePLSQL.php Bu bağlantının gömülü görüntü yaklaşımını göstermediğini, ancak sizi harekete geçirecek ayrıntılara sahip olduğunu unutmayın.
— tbone
41
E-postalardaki veri URI'leri pek çok yaygın istemcide desteklenmez ve kullanılmamalıdır, bakınız: campaignmonitor.com/blog/post/3927/…
— Michael Böckling
2
— Hotmail
22

Diğer çözüm, görüntüyü ek olarak eklemek ve ardından cid kullanarak html kodunu referans almaktır.

HTML Kodu:

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

C # Kodu:

EmailMessage email = new EmailMessage(service);
email.Subject = "Email with Image";
email.Body = new MessageBody(BodyType.HTML, html);
email.ToRecipients.Add("abc@xyz.com");
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
kaynak
11

Buradaki cevapların hiçbirini yararlı bulmuyorum, bu yüzden çözümümü sunuyorum.

  1. Sorun şu ki multipart/related, bu durumda iyi olmayan içerik türü olarak kullanıyorsunuz . Ben kullanıyorum multipart/mixedve onun içinde multipart/alternative(çoğu istemcide çalışıyor).

  2. Mesaj yapısı aşağıdaki gibi olmalıdır: 

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

O zaman işe yarayacak

— Pavel Perna
kaynak
Bu sefer mücadele. Tam olarak yukarıdaki gibi kodladım, ancak görüntü görünmüyor (sadece alternatif metin içeren bir çerçeve; metin iyi çalışıyor). İçerik Kimliğim <dosyaadı.jpg>, dolayısıyla href = "cid: dosyaadı.jpg" - Content-ID ve cid: değerinin veya sözdiziminin özel bir numarası var mı?
— Peter Flynn
RFC2392 ile kontrol ettim ve CID ifadesi geçerli görünüyor. Ama yine de görünmüyor.
— Peter Flynn
Benzer bir soruya bir cevap yazdım ve yapıyı açıklamak için bir ascii sanatı
— yarattım
4

Görüntüleri html'ye gömmek için Base64 kullanmak harika. Yine de, lütfen base64 dizelerinin e-posta boyutunuzu büyütebileceğini unutmayın.

Bu nedenle,

1) Çok sayıda resminiz varsa, resimlerinizi bir sunucuya yüklemek ve bu resimleri sunucudan yüklemek e-posta boyutunuzu küçültebilir. (Google üzerinden birçok ücretsiz hizmet alabilirsiniz)

2) Postanızda yalnızca birkaç resim varsa, base64 dizelerini kullanmak kesinlikle harika bir seçenektir.

Mevcut cevapların sağladığı seçeneklerin yanı sıra, linux üzerinde bir base64 dizesi oluşturmak için bir komut da kullanabilirsiniz:

base64 test.jpg
— Brian
kaynak
Michael Böckling'in belirttiği: E-postalardaki veri URI'leri gmail gibi pek çok yaygın istemcide desteklenmiyor
— Mendy
3

Bunun eski bir gönderi olduğunu biliyorum, ancak mevcut yanıtlar, görünümün ve diğer birçok e-posta sağlayıcısının satır içi resimleri veya CID görüntülerini desteklemediği gerçeğine değinmiyor. E-postalara resim yerleştirmenin en etkili yolu, onu çevrimiçi olarak barındırmak ve e-postaya bir bağlantı yerleştirmektir. Küçük e-posta listeleri için genel bir dropbox iyi çalışıyor. Bu aynı zamanda e-posta boyutunu da azaltır.

— Scooter Crawford
kaynak
2

  1. Satır içi görüntülerin tamamen uyumlu olması için 3 sınıra ihtiyacınız vardır.

  2. Her şey multipart/mixed.

  3. Ardından multipart/related, sizin multipart/alternativeve görsel ek başlıklarınızı içermek için kullanın .

  4. Son olarak, indirilebilir eklerinizi ürününün son sınırına dahil edin multipart/mixed.

— Steven Newman
kaynak
11
Bir örnek vermeniz faydalı olacaktır.
— Makyen
7
Daha da kullanışlı olan, spesifikasyona bir referans olacaktır.
— jbruni
2

Martyn Davies'in bu soruna yönelik üç farklı yaklaşımının profesyonellerini ve eksilerini listeleyen çok iyi bir blog yazısı var. Bunu https://sendgrid.com/blog/embedding-images-emails-facts/ adresinde okuyabilirsiniz .

CSS arka plan resimlerini kullanarak dördüncü bir yaklaşım eklemek istiyorum.

Ekle

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

e-posta adresinize ve aşağıdaki gibi bir css sınıfına:

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

Bu çözümlerden birinin çalışmasını sağlayamayanlar için : Satır içi resmi e-postayla gönderin @ T30 tarafından sunulan çözümde ortaya konan adımları izleyerek satır içi resmimin görünüm tarafından engellenmeden görüntülenmesini sağladım (önceki yöntemler engellendi) . Bizim gibi takas kullanıyorsanız, o zaman da şunları yaparken: 

service = new ExchangeService(ExchangeVersion);
service.AutodiscoverUrl("email@domain.com");
SmtpClient smtp = new SmtpClient(service.Url.Host);

değişim hizmeti url barındırıcınızı iletmeniz gerekecek. Bunun dışında, bu çözümü takip etmek, gömülü görüntüleri kolayca göndermenize izin vermelidir.

— tstrand66
kaynak
1

Görüntü dosyalarını Ekle / Resim menü işlevini kullanarak eklerseniz, hem Outlook hem de Outlook Express'in bu çok parçalı görüntü e-posta biçimlerini oluşturması ilgi çekici olabilir.

Açıktır ki e-posta türü HTML olarak ayarlanmalıdır (düz metin değil).

Diğer herhangi bir yöntem (örneğin, sürükle / bırak veya herhangi bir komut satırı çağrısı), görüntülerin ek olarak gönderilmesiyle sonuçlanır.

Daha sonra kendinize böyle bir e-posta gönderirseniz, nasıl biçimlendirildiğini görebilirsiniz! :)

FWIW, komut satırı modundan satır içi görüntüler yapan bağımsız bir Windows çalıştırılabilir dosyası arıyorum, ancak hiçbiri yok gibi görünüyor. Bu, birçok kişinin yukarı çıktığı bir yoldur ... Bunu, uygun şekilde biçimlendirilmiş bir .eml dosyası geçirerek Outlook Express ile yapabilirsiniz.

— Peter
kaynak
0

Aşağıdakiler, bunu başarmanın iki yolu olan çalışma kodudur:

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 = "john@example.com";
            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("john@example.com");
            recipient.Resolve();

            // Send.
            mailItem.Send();
        }
    }
}
— Tarık
kaynak
0

Pavel Perna'nın bana çok yardımcı olan gönderisine ek bir ipucu (itibarımla yorum yapamıyorum, bu yüzden bunu cevap olarak gönderiyorum): Microsoft Exchange'in bazı sürümlerinde, satır içi içerik düzenlemesi kaldırıldı ( Microsoft'un bu gönderisine bakın ). Görüntü, kullanıcının Outlook'ta gördüğü postanın bir parçası değildir. Çözüm olarak bunun yerine "Content-Disposition: attachement" kullanın. Outlook 2016, "Content-Disposition: ek" kullanmalarına rağmen, posta iletisinde kullanılan resimleri ek olarak göstermez.

— Klendatho
kaynak
-31

Outlook'u köprü ile statik bir resim göndermek için kullanıyorsanız, kolay bir yol Word kullanmak olacaktır.

  1. MS Word'ü açın
  2. Resmi boş bir sayfaya kopyalayın
  3. Resme köprü ekleyin (Ctrl + K)
  4. Resmi e-postanıza kopyalayın
— Claudio Viz
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.