在html电子邮件中嵌入图像

在html电子邮件中嵌入图像,html,image,oracle,email,mime,Html,Image,Oracle,Email,Mime,我正在尝试发送一封包含嵌入gif图像的多部分/相关html电子邮件。此电子邮件是使用Oracle PL/SQL生成的。我的尝试失败了,图像显示为红色X(在Outlook 2007和yahoo mail中) 我发送html电子邮件已经有一段时间了,但我现在的要求是在电子邮件中使用几个gif图像。我可以将它们存储在我们的一个web服务器上,只需链接到它们,但许多用户的电子邮件客户端不会自动显示它们,需要更改设置或手动下载每封电子邮件 所以,我的想法是嵌入图像。我的问题是: 我做错了什么 嵌入方法正确

我正在尝试发送一封包含嵌入gif图像的多部分/相关html电子邮件。此电子邮件是使用Oracle PL/SQL生成的。我的尝试失败了,图像显示为红色X(在Outlook 2007和yahoo mail中)

我发送html电子邮件已经有一段时间了,但我现在的要求是在电子邮件中使用几个gif图像。我可以将它们存储在我们的一个web服务器上,只需链接到它们,但许多用户的电子邮件客户端不会自动显示它们,需要更改设置或手动下载每封电子邮件

所以,我的想法是嵌入图像。我的问题是:

  • 我做错了什么
  • 嵌入方法正确吗
  • 如果我需要使用越来越多的图像,还有其他选择吗?附件不起作用,因为图像通常是徽标和图标,与邮件上下文无关。此外,电子邮件的某些元素是在线系统的链接,所以生成一个静态PDF和附加将不起作用(据我所知)
  • 片段:

    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--
    
    MIME版本:1.0
    致:me@gmail.com
    密件抄送:me@yahoo.com
    发件人:email@yahoo.com
    主题:测试
    答复:email@yahoo.com
    内容类型:多部分/相关;boundary=“a1b2c3d4e3f2g1”
    --a1b2c3d4e3f2g1
    内容类型:text/html;
    我的头衔
    

    ... 更多的html在这里。。。 --a1b2c3d4e3f2g1 内容类型:image/gif; 内容ID: 内容传输编码:base64 内容配置:内联 [此处为base64图像数据] --a1b2c3d4e3f2g1--
    非常感谢

    顺便说一句:是的,我已经验证了base64数据是正确的,因为我可以将图像嵌入html本身(使用相同的算法创建标题数据),并在Firefox/IE中查看图像


    我还应该注意到,这不是垃圾邮件,电子邮件是发送给特定的客户谁期待它每天。内容是数据驱动的,而不是广告。

    尝试直接插入内容,这样您可以在电子邮件中的不同位置插入多个图像

    <img src="data:image/jpg;base64,{{base64-data-string here}}" />
    
    
    
    并使此帖子有益于其他人: 如果没有base64数据字符串,请在以下位置轻松创建一个: 从图像文件

    电子邮件源代码看起来像这样,但我真的无法告诉您边界是什么:

     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--
    
    至:email@email.de
    主题:。。。
    内容类型:多部分/相关;
    边界=“-----------09030302020910600070908”
    这是MIME格式的多部分消息。
    --------------090303020209010600070908
    内容类型:text/html;字符集=ISO-8859-15
    内容传输编码:7bit
    --------------090303020209010600070908
    内容类型:图片/png;
    name=“moz screenshot.png”
    内容传输编码:base64
    内容ID:
    内容配置:内联;
    filename=“moz screenshot.png”
    [此处为base64图像数据]
    --------------090303020209010600070908--
    

    //编辑:哦,我刚刚意识到,如果您插入我文章中的第一个代码片段,以便与thunderbird一起编写电子邮件,thunderbird会自动更改html代码,使其看起来与我文章中的第二个代码几乎相同。

    如果不起作用,您可以尝试使用以下工具之一,将图像转换为html表(但要注意图像的大小):


    我觉得这里的任何答案都没有用处,所以我提供了我的解决方案

  • 问题是,您使用的内容类型是
    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--
    
    [标题]
    内容类型:多部分/混合;边界=“边界1”
    --边界1
    内容类型:多部分/可选;边界=“边界2”
    --边界2
    内容类型:text/html;字符集=ISO-8859-15
    内容传输编码:7bit
    [带有a href=“cid:…”的HTML代码]
    --边界2
    内容类型:图片/png;
    name=“moz screenshot.png”
    内容传输编码:base64
    内容ID:
    内容配置:inline;filename=“moz screenshot.png”
    [此处为base64图像数据]
    --边界2--
    --边界1--
    

  • 然后它将工作

    如果您使用“插入/图片”菜单功能插入图像文件,Outlook和Outlook Express可能会生成这些多部分图像电子邮件格式

    显然,电子邮件类型必须设置为HTML(而不是纯文本)

    任何其他方法(例如拖放或任何命令行调用)都会导致图像作为附件发送

    如果您随后向自己发送这样一封电子邮件,您可以看到它的格式!:)


    FWIW,我正在寻找一个独立的windows可执行文件,它可以从命令行模式内联图像,但似乎没有。这是一条许多人走上的道路。。。可以使用Outlook Express来实现这一点,方法是向它传递一个格式正确的.eml文件。

    使用Base64在html中嵌入图像非常棒。尽管如此,请注意base64字符串会使您的电子邮件变大

    所以,

    1) 如果您有许多图像,将图像上载到服务器并从服务器加载这些图像可以减小电子邮件大小。(你可以通过谷歌获得很多免费服务)

    2) 如果您的邮件中只有一些图像,那么使用base64字符串绝对是一个不错的选择

    除了现有答案提供的选项外,您还可以使用命令在linux上生成base64字符串:

    base64 test.jpg
    
  • 内联图像需要3个边界才能完全兼容

  • 所有内容都在
    多部分/混合

  • 然后使用
    multipart/related
    包含
    multipart/alternative
    和图像附件标题

  • 最后,将可下载的附件包含在
    多部分/混合的最后一个边界内


  • 如果您使用Outlook发送带有超链接的静态图像,一种简单的方法是
    <html>
        <head>
        </head>
        <body>
            <img width=100 height=100 id="1" src="cid:Logo.jpg">
        </body>
    </html>
    
    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();
    
    <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];
    }
    
    service = new ExchangeService(ExchangeVersion);
    service.AutodiscoverUrl("email@domain.com");
    SmtpClient smtp = new SmtpClient(service.Url.Host);
    
    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();
            }
        }
    }
    
    <img width="150" height="60" src="@($"{Context.Request.Scheme}://{Context.Request.Host}{Context.Request.PathBase}/images/logo.png")" />