HTML ईमेल में इमेज एम्बेड करना

113

मैं एम्बेडेड gif छवियों के साथ एक मल्टीपार्ट / संबंधित HTML ईमेल भेजने की कोशिश कर रहा हूं। यह ईमेल Oracle PL / SQL का उपयोग करके बनाया गया है। मेरे प्रयास विफल हो गए हैं, छवि एक लाल एक्स के रूप में दिखाई दे रही है (आउटलुक 2007 और याहू मेल में)

मैं कुछ समय के लिए html ईमेल भेज रहा हूं, लेकिन मेरी आवश्यकताएं अब ईमेल में कई GIF छवियों का उपयोग करने के लिए हैं। मैं इन्हें हमारे एक वेब सर्वर पर स्टोर कर सकता हूं और उन्हें केवल लिंक कर सकता हूं, लेकिन कई उपयोगकर्ता ईमेल क्लाइंट उन्हें स्वचालित रूप से नहीं दिखाएंगे और उन्हें प्रत्येक ईमेल के लिए सेटिंग्स बदलने या मैन्युअल रूप से उन्हें डाउनलोड करने की आवश्यकता होगी।

इसलिए, मेरे विचार छवि को एम्बेड करने के लिए हैं। मेरे प्रश्न हैं:

मुझसे यहां क्या गलत हो रहा है?
क्या एंबेडिंग दृष्टिकोण सही है?
किसी भी अन्य विकल्प अगर मुझे अधिक से अधिक छवियों का उपयोग करने की आवश्यकता है? अनुलग्नक काम नहीं करेंगे, क्योंकि चित्र आम तौर पर लोगो और आइकन होते हैं जो संदेश के संदर्भ से समझ में नहीं आएंगे। इसके अलावा, ईमेल के कुछ तत्व एक ऑनलाइन सिस्टम में लिंक हैं, इसलिए एक स्टैटिक पीडीएफ जेनरेट करना और अटैच करना (वैसे भी मेरी जानकारी में) काम नहीं करेगा।

टुकड़ा:

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

बहुत धन्यवाद।

BTW: हां, मैंने सत्यापित किया है कि बेस 64 डेटा सही है, क्योंकि मैं HTML में छवि को स्वयं एम्बेड कर सकता हूं (हेडर डेटा बनाने के लिए समान उपयोग का उपयोग करके) और फ़ायरफ़ॉक्स / IE में छवि देख सकता हूं।

मुझे यह भी ध्यान देना चाहिए कि यह स्पैम के लिए नहीं है, ईमेल उन विशिष्ट ग्राहकों को भेजे जाते हैं जो इसकी दैनिक अपेक्षा कर रहे हैं। सामग्री डेटा-चालित है, और विज्ञापन नहीं।

— टी हड्डी
स्रोत

त्वरित प्रश्न: क्या आप इन छवियों को ऑफ-साइट होस्ट कर रहे हैं या उन्हें सीधे ईमेल में एम्बेड कर रहे हैं?

— जोनलिम

मेरे सवाल का हिस्सा है, मैं भी कर सकता हूँ। मैं उन्हें एम्बेड करने के लिए यहाँ कोशिश कर रहा हूँ, लेकिन सफलतापूर्वक नहीं। अगर मैं सिर्फ उनसे लिंक करता हूं, तो कई उपयोगकर्ता बिना डाउनलोड किए छवियों को नहीं देख पाएंगे, जिससे मैं बचना चाहूंगा।

— tbone

1

<img src="URL" />मेरे लिए एक नियमित काम किया गया था, लेकिन यह एक ऐसी छवि थी जिसे मैंने ऑफ-साइट होस्ट किया था। यह आपके लिए काम नहीं करता है?

— जोनलिम

"वर्क्स" व्यक्तिपरक है ... हां, यह काम करता है यदि उपयोगकर्ता हर बार छवियों को डाउनलोड करने के लिए तैयार है, लेकिन मैं इससे बचना चाहता हूं और छवि को एम्बेड करना चाहता हूं।

— tbone

1

@JonLim: इस पर ध्यान देने के लिए धन्यवाद, जो मुझे याद आ रहा था उसके जवाब में मेरी टिप्पणी देखें।

— tbone

139

इसे सीधे सम्मिलित करने का प्रयास करें, इस तरह आप ईमेल में विभिन्न स्थानों पर कई चित्र सम्मिलित कर सकते हैं।

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

और इस पोस्ट को दूसरों के लिए उपयोगी बनाने के लिए: यदि आपके पास एक बेस 64-डेटा स्ट्रिंग नहीं है, तो आसानी से एक बनाएं: http://www.motobit.com/util/base64-decoder-encoder.asp एक छवि फ़ाइल से ।

ईमेल स्रोत कोड कुछ इस तरह दिखता है, लेकिन मैं वास्तव में आपको बता सकता हूं कि वह सीमा क्या है:

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

// EDIT: ओह, मुझे एहसास है कि अगर आप थंडरबर्ड के साथ एक ईमेल लिखने के लिए मेरी पोस्ट से पहला कोड स्निपेट डालते हैं, तो थंडरबर्ड स्वचालित रूप से HTML कोड को बदल देता है जो कि मेरी पोस्ट के दूसरे कोड के समान है।

— बर्न्ड
स्रोत

5

पहले यह कोशिश की, यह मेरे लिए ईमेल के लिए काम नहीं करता है। IE / फ़ायरफ़ॉक्स में देखने के लिए ठीक काम करता है, लेकिन ईमेल के रूप में नहीं भेजा जाता है।

— tbone

शायद आप एक तरह से जानते हैं (सामग्री प्रकार क्या होगा? पाठ / html? ईमेल हेडर मुझे एक मिश्रित html / छवि फ़ाइल इस तरह भेजने के लिए जानना होगा)

— tbone

1

@ सतर्कता @ [उपयोगकर्ता नाम] किसी को सचेत करने के लिए, बस अपना प्रश्न देखें। मैं utl_smtp का उपयोग करता हूं। मेरे लिए, मुझे html बॉडी, सीमाओं आदि के साथ एक क्लॉब बनाना था और फिर utl_smtp के माध्यम से भेजना था। सरल उदाहरण के लिए यहां देखें: oracle-base.com/articles/misc/EmailFromOraclePLSQL.php ध्यान दें कि यह लिंक एम्बेडेड छवियों को नहीं दिखाता है, लेकिन आपको प्राप्त करने के लिए विवरण है।

— tbone

41

ईमेल में डेटा URI कई मुख्यधारा के ग्राहकों में समर्थित नहीं हैं और उनका उपयोग नहीं किया जाना चाहिए, देखें: campaignmonitor.com/blog/post/3927/…

— माइकल बॉकलिंग

2

यह हॉटमेल / icloud = में काम नहीं करता है (क्या मुझे कुछ भी याद नहीं है

— hsb1007

22

अन्य समाधान छवि को अनुलग्नक के रूप में संलग्न कर रहा है और फिर इसे cid का उपयोग करके html कोड का संदर्भ दे रहा है।

HTML कोड:

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

C # कोड:

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

— ख्याति एलहंस
स्रोत

11

मुझे यहाँ कोई उत्तर उपयोगी नहीं मिला, इसलिए मैं अपना समाधान प्रदान कर रहा हूँ।

समस्या यह है कि आप multipart/relatedसामग्री प्रकार के रूप में उपयोग कर रहे हैं जो इस मामले में अच्छा नहीं है। मैं multipart/mixedइसका उपयोग कर रहा हूं और इसके अंदर multipart/alternative(यह ज्यादातर ग्राहकों पर काम करता है)।

संदेश की संरचना इस प्रकार होनी चाहिए:

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

तब यह काम करेगा

— पावेल परना
स्रोत

इस पर संघर्ष। मैंने बिल्कुल ऊपर की तरह कोडित किया है, लेकिन छवि दिखाई नहीं दे रही है (बस एक पाठ के साथ एक फ्रेम; पाठ ठीक काम करता है)। मेरी सामग्री-आईडी <filename.jpg> है तो मेरा href = "cid: filename.jpg" - क्या सामग्री-आईडी और cid के मूल्य या वाक्य रचना के लिए कुछ विशेष चाल है:?

— पीटर फ्लिन

मैंने RFC2392 के साथ जाँच की और CID अभिव्यक्ति मान्य प्रतीत होती है। लेकिन यह अभी भी प्रदर्शित नहीं करता है।

— पीटर फ्लिन

मैंने एक ऐसे ही सवाल का जवाब लिखा और संरचना को समझाने के लिए एक आस्की कला बनाई: stackoverflow.com/a/40420648/633961

— guettli

10

यदि यह काम नहीं करता है, तो आप इनमें से एक उपकरण की कोशिश कर सकते हैं, जो छवि को HTML तालिका में बदल देता है (हालांकि अपनी छवि के आकार से सावधान रहें):

— इरविन मेयर
स्रोत

10

img2hmtl एक निराला समाधान / विचार है जिसे मैंने थोड़ी देर में देखा है। +1

— कृतिजन लीवा

4

HTML में छवियों को एम्बेड करने के लिए Base64 का उपयोग करना भयानक है। बहरहाल, कृपया ध्यान दें कि बेस 64 स्ट्रिंग्स आपके ईमेल के आकार को बड़ा बना सकते हैं।

इसलिए,

1) यदि आपके पास कई चित्र हैं, तो अपनी छवियों को सर्वर पर अपलोड करना और उन छवियों को सर्वर से लोड करना आपके ईमेल का आकार छोटा कर सकता है। (आप Google के माध्यम से बहुत सारी मुफ्त सेवाएँ प्राप्त कर सकते हैं)

2) यदि आपके मेल में कुछ ही चित्र हैं, तो बेस 64 स्ट्रिंग्स का उपयोग करना निश्चित रूप से एक बढ़िया विकल्प है।

मौजूदा उत्तरों द्वारा प्रदान किए गए विकल्पों के अलावा, आप linux पर बेस 64 स्ट्रिंग उत्पन्न करने के लिए एक कमांड का उपयोग भी कर सकते हैं:

base64 test.jpg

— ब्रायन
स्रोत

माइकल बॉक्लिंग द्वारा इंगित: ईमेल में डेटा URI कई मुख्यधारा के ग्राहकों में gmail

— Mendy

3

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन वर्तमान उत्तर इस तथ्य को संबोधित नहीं करते हैं कि आउटलुक और कई अन्य ईमेल प्रदाता इनलाइन छवियों या सीआईडी छवियों का समर्थन नहीं करते हैं। ईमेल में छवियों को रखने का सबसे प्रभावी तरीका यह है कि इसे ऑनलाइन होस्ट करें और ईमेल में एक लिंक रखें। छोटी ईमेल सूचियों के लिए एक सार्वजनिक ड्रॉपबॉक्स ठीक काम करता है। इससे ईमेल का आकार भी नीचे रहता है।

— स्कूटर क्रॉफर्ड
स्रोत

2

इनलाइन छवियों के पूर्ण अनुपालन के लिए आपको 3 सीमाओं की आवश्यकता होती है।
सब कुछ अंदर चला जाता है multipart/mixed।
फिर multipart/relatedअपने multipart/alternativeऔर अपने छवि अनुलग्नक शीर्ष लेख को शामिल करने के लिए उपयोग करें ।
अंत में, अंतिम सीमा के अंदर अपने डाउनलोड करने योग्य अनुलग्नकों को शामिल करें multipart/mixed।

— स्टीवन न्यूमैन
स्रोत

11

यदि आप एक उदाहरण शामिल करते हैं तो यह उपयोगी होगा।

— Makyen

7

इससे भी अधिक उपयोगी युक्ति का संदर्भ होगा।

— जब्रुनी

2

वहाँ वास्तव में एक बहुत अच्छा ब्लॉग पोस्ट है जो मार्टीन डेविस द्वारा इस समस्या के लिए तीन अलग-अलग दृष्टिकोणों के समर्थक और विपक्ष को सूचीबद्ध करता है। आप इसे https://sendgrid.com/blog/embedding-images-emails-facts/ पर पढ़ सकते हैं ।

मैं सीएसएस पृष्ठभूमि छवियों का उपयोग करके एक चौथा दृष्टिकोण जोड़ना चाहूंगा।

जोड़ना

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

जैसे आपका ई-मेल बॉडी और एक सीएसएस क्लास:

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

— GerardV
स्रोत

2

उन लोगों के लिए जो काम कर रहे इन समाधानों में से एक प्राप्त कर सकते हैं: ईमेल में इनलाइन छवि भेजें @ T30 द्वारा दिए गए समाधान में दिए गए चरणों के बाद मैं आउटलुक द्वारा अवरुद्ध किए बिना प्रदर्शित करने के लिए मेरी इनलाइन छवि प्राप्त करने में सक्षम था (पिछले तरीकों से इसे अवरुद्ध किया गया था) । यदि आप विनिमय का उपयोग कर रहे हैं जैसे हम तब भी कर रहे हैं:

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

आपको इसे अपनी एक्सचेंज सर्विस url होस्ट को पास करना होगा। इसके अलावा इस समाधान के बाद आपको आसानी से एम्बेडेड इम्बैगेज भेजने की अनुमति मिलनी चाहिए।

— tstrand66
स्रोत

1

यह दिलचस्पी का विषय हो सकता है कि आउटलुक और आउटलुक एक्सप्रेस इन मल्टीपार्ट छवि ईमेल स्वरूपों को उत्पन्न कर सकते हैं, यदि आप सम्मिलित / मेनू मेनू फ़ंक्शन का उपयोग करके छवि फ़ाइलों को सम्मिलित करते हैं।

जाहिर है ईमेल प्रकार को HTML (सादा पाठ नहीं) पर सेट किया जाना चाहिए।

किसी अन्य विधि (जैसे ड्रैग / ड्रॉप, या किसी कमांड-लाइन इनवोकेशन) के परिणामस्वरूप छवि (ओं) को अनुलग्नक के रूप में भेजा जा रहा है।

यदि आप अपने आप को ऐसा ईमेल भेजते हैं, तो आप देख सकते हैं कि यह कैसे स्वरूपित है! :)

एफडब्ल्यूआईडब्ल्यू, मैं एक स्टैंडअलोन विंडोज़ निष्पादन योग्य की तलाश कर रहा हूं जो कमांड लाइन मोड से इनलाइन छवियां करता है, लेकिन कोई भी नहीं लगता है। यह एक रास्ता है जो बहुत से ऊपर चला गया है ... एक इसे आउटलुक एक्सप्रेस के साथ कहा जा सकता है, इसे एक उचित स्वरूपित .eml फ़ाइल के साथ पास करके।

— पीटर
स्रोत

0

निम्नलिखित इसे प्राप्त करने के दो तरीकों के साथ काम कर रहा है:

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

— तारिक
स्रोत

0

पावेल पर्ना के पद के लिए एक अतिरिक्त संकेत जिसने मुझे बहुत मदद की (मेरी प्रतिष्ठा के साथ कोई टिप्पणी नहीं कर सकता, इसीलिए मैं इसे उत्तर के रूप में पोस्ट करता हूं): Microsoft Exchange के कुछ संस्करणों में, इनलाइन सामग्री का विवाद हटा दिया गया है ( देखें Microsoft द्वारा यह पोस्ट )। आउटलुक में उपयोगकर्ता द्वारा देखे जाने वाले मेल में छवि बस हिस्सा नहीं है। वर्कअराउंड के रूप में, इसके बजाय "कंटेंट-डिस्पोजल: अटैचमेंट" का उपयोग करें। आउटलुक 2016 छवियों को मेल संदेश में उपयोग किए जाने वाले अटैचमेंट के रूप में नहीं दिखाएगा, हालांकि वे "सामग्री-विवाद: अटैचमेंट" का उपयोग करते हैं।

— Klendatho
स्रोत

-30

यदि आप हाइपरलिंक के साथ स्थिर छवि भेजने के लिए आउटलुक का उपयोग कर रहे हैं, तो वर्ड का उपयोग करने का एक आसान तरीका होगा।

एमएस वर्ड खोलें
छवि को एक रिक्त पृष्ठ पर कॉपी करें
छवि के लिए हाइपरलिंक जोड़ें (Ctrl + K)
छवि को अपने ईमेल पर कॉपी करें

— क्लाउडियो विज़
स्रोत