web-dev-qa-db-ja.com

HTMLメールに画像を埋め込む

私は、埋め込まれたGIF画像を含むマルチパート/関連HTMLメールを送信しようとしています。この電子メールはOracle PL/SQLを使用して生成されます。私の試みは失敗しました。画像は赤いXで表示されていました（Outlook 2007およびyahoo mail）。

私はしばらく前からHTML形式のEメールを送信してきましたが、私の要件は、Eメールで複数のGIF画像を使用することです。これらを私たちのWebサーバーのひとつに保存してリンクすることはできますが、多くのユーザーのEメールクライアントはそれらを自動的には表示せず、設定を変更するか、Eメールごとに手動でダウンロードする必要があります。

だから、私の考えはイメージを埋め込むことです。私の質問は：

  1. 私はここで何をしていますか？
  2. 埋め込み方法は正しいですか。
  3. もっと多くの画像を使用する必要がある場合、他に選択肢はありますか？添付ファイルは機能しません。画像は通常ロゴやアイコンであり、メッセージの文脈からは意味がありません。また、電子メールの一部の要素はオンラインシステムへのリンクなので、静的なPDFを生成して添付してもうまくいきません（とにかく私の知る限りでは）。

抜粋：

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

どうもありがとう。

ところで：はい、私は（ヘッダデータを作成するための同じアルゴの使用を使用して）HTML自体に画像を埋め込むことができてFirefox/IEで画像を見ることができるので、base64データが正しいことを確認しました。

私はまたこれがスパムのためではないことに注意すべきです、電子メールは毎日それを期待している特定のクライアントに送られます。コンテンツはデータ駆動型であり、広告ではありません。

htmlimageoracleemailmime
98
tbone

直接挿入してみてください。この方法で、電子メールのさまざまな場所に複数の画像を挿入できます。

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

そして、他の人にこの記事を有用にするために：あなたがbase64データ文字列を持っていない場合は、で簡単に作成してください： http://www.motobit.com/util/base64-decoder-encoder.asp 画像ファイルから。

電子メールのソースコードはこのように見えますが、その境界が何のためにあるのか、私はあなたに言うことができません。

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

//編集：ああ、Thunderbirdでメールを書くために私の記事から最初のコードスニペットを挿入すると、Thunderbirdは自動的にhtmlコードを変更して私の記事の2番目のコードとほぼ同じに見えるようになります。

121
Bernd

もう1つの解決策は、画像を添付ファイルとして添付してから、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("[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();
15
Khyati Elhance

私はここで答えのどれもが役に立つとは思わないので、私は私の解決策を提供しています。

  1. 問題はあなたがmultipart/relatedをコンテントタイプとして使っているということです。私はmultipart/mixedとその中のmultipart/alternativeを使っています（ほとんどのクライアントで動作します）。

  2. メッセージ構造は次のようになります。

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

それでうまくいきます

9
Pavel Perna

うまくいかない場合は、画像をHTMLテーブルに変換する次のいずれかのツールを試してください（ただし、画像のサイズに注意してください）。

7
Erwin Mayer

HTMLに画像を埋め込むためにBase64を使用することは素晴らしいです。それにもかかわらず、base64文字列はあなたの電子メールサイズを大きくする可能性があることに注意してください。

したがって、

1）画像が多数ある場合は、画像をサーバーにアップロードしてサーバーからロードすると、Eメールのサイズが小さくなる可能性があります。 （あなたはグーグルを介して多くの無料サービスを受けることができます）

2）あなたのメールにほんの数枚の画像しかない場合は、base64文字列を使うことは間違いなく素晴らしいオプションです。

既存の回答で提供されている選択肢以外に、Linuxでbase64文字列を生成するためのコマンドを使用することもできます。

base64 test.jpg
4
Brian

  1. インライン画像を完全に準拠させるには、3つの境界が必要です。

  2. すべてがmultipart/mixedの中に入ります。

  3. それからmultipart/relatedを使ってあなたのmultipart/alternativeとあなたの画像添付ヘッダを入れてください。

  4. 最後に、ダウンロード可能な添付ファイルをmultipart/mixedの最後の境界内に含めます。

2
Steven Newman

これは古い投稿ですが、現在の回答では、Outlookや他の多くの電子メールプロバイダはインライン画像やCID画像をサポートしていません。画像をEメールに配置する最も効果的な方法は、画像をオンラインでホストして、Eメールにリンクを張ることです。小さいEメールリストの場合は、パブリックDropboxが問題なく機能します。これにより、Eメールのサイズも小さくなります。

2
Scooter Crawford

これらの解決策のうちの1つを働かせることができなかった人たちのために： 電子メールでインライン画像を送ってください @ T30によって提供された解決策に示されたステップに従ってOutlookでブロックされずにインライン画像を表示するようにします（以前の方法ではブロックされていました）。あなたが私たちのように交換を使っているならば、そうする時もそうです：

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

あなたはそれをあなたの交換サービスURLホストに渡す必要があるでしょう。それ以外の方法では、この方法で埋め込み画像を簡単に送信できます。

2
tstrand66

Martyn Daviesによるこの問題に対する3つの異なるアプローチの長所と短所をリストした非常に良いブログ記事が実際にあります。あなたは https://sendgrid.com/blog/embedding-images-emails-facts/ でそれを読むことができます。

CSS背景画像を使用した4番目のアプローチを追加したいと思います。

追加する

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

あなたのEメールの本文とCSSクラスのように：

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

[挿入/画像]メニュー機能を使用して画像ファイルを挿入すると、OutlookとOutlook Expressの両方でこれらのマルチパート画像の電子メール形式を生成できることが興味深い場合があります。

明らかに、電子メールの種類はHTMLに設定する必要があります（プレーンテキストではありません）。

他の方法（ドラッグ/ドロップ、コマンドライン呼び出しなど）を行うと、画像が添付ファイルとして送信されます。

そのようなEメールを自分自身に送信すると、そのフォーマットがわかります。 :)

確かに、私はコマンドラインモードからインライン画像を実行するスタンドアロンのWindows実行ファイルを探していますが、どれもないようです。これは、多くの人が行ってきたパスです...適切な形式の.emlファイルを渡すことで、Outlook Expressなどで実行できます。

1
Peter

以下は、これを達成する2つの方法を備えた作業コードです。

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