встраивание изображения в html электронную почту


Я пытаюсь отправить составной / связанный html-адрес электронной почты со встроенными gif-изображениями. Это письмо генерируется с помощью Oracle PL / SQL. Мои попытки потерпели неудачу, и изображение появилось как красный X (в Outlook 2007 и Yahoo mail)

Я отправлял html-письма в течение некоторого времени, но теперь мои требования заключаются в использовании нескольких изображений gif в электронной почте. Я могу хранить их на одном из наших веб-серверов и просто ссылаться на них, но многие пользователи почтовых клиентов не будут показывать их автоматически и будут необходимо либо изменить настройки, либо вручную загрузить их для каждого письма.

Итак, мои мысли заключаются в том, чтобы встроить изображение. Мои вопросы:

  1. что я здесь делаю не так?
  2. является ли метод встраивания правильным?
  3. любые другие варианты, если мне нужно использовать больше изображений? Вложения не будут работать, так как изображения, как правило, логотипы и значки, которые не будут иметь смысла из контекста сообщения. Кроме того, некоторые элементы электронной почты ссылки в онлайн-систему, поэтому создание статического 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--

большое спасибо.

BTW: Да, я проверил, что данные base64 верны, так как я могу встроить изображение в сам html (используя тот же algo для создания данных заголовка) и посмотреть изображение в Firefox/IE.

Я также должен отметить, что это не для спама, письма отправляются конкретным клиентам, которые ожидают это ежедневно. Контент управляется данными, а не рекламой.

10 81

10 ответов:

попробуйте вставить его непосредственно, таким образом, вы можете вставить несколько изображений в различных местах по электронной почте.

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

и сделать этот пост полезным для других, чтобы: Если у вас нет строки base64-data, создайте ее легко: 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: Oh, я просто понимаю, что если вы вставляете первый фрагмент кода из моего сообщения, чтобы написать электронное письмо с thunderbird, thunderbird автоматически изменяет html-код, чтобы выглядеть примерно так же, как и второй код в моем сообщении.

другое решение-прикрепить изображение как вложение, а затем ссылаться на него html-код с помощью cid.

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

Я не нахожу ни один из ответов здесь полезным, поэтому я предоставляю свое решение.

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

тогда он будет работать

Если это не работает, вы можете попробовать один из этих инструментов, которые преобразуют изображение в таблицу HTML (остерегайтесь размера вашего изображения):

использование Base64 для встраивания изображений в html является удивительным. Тем не менее, обратите внимание, что строки base64 могут сделать ваш размер электронной почты большим.

таким образом,

1) Если у вас есть много изображений, загрузка изображений на сервер и загрузка этих изображений с сервера может сделать ваш размер электронной почты меньше. (Вы можете получить много бесплатных услуг через Google)

2) Если в вашей почте есть всего несколько изображений, использование строк base64 определенно потрясающе выбор.

помимо вариантов, предоставляемых существующими ответами, вы также можете использовать команду для создания строки base64 в linux:

base64 test.jpg
  1. вам нужно 3 границы для встроенных изображений, чтобы быть полностью совместимым.

  2. все идет внутри multipart/mixed.

  3. затем использовать multipart/related содержащего multipart/alternative и ваши заголовки вложений изображений.

  4. наконец, включите загружаемые вложения внутри последней границы multipart/mixed.

на самом деле есть очень хороший пост в блоге, в котором перечислены плюсы и минусы трех разных подходов к этой проблеме Мартина Дэвиса. Вы можете прочитать его на https://sendgrid.com/blog/embedding-images-emails-facts/.

Я хотел бы добавить четвертый подход, используя CSS фоновые изображения.

добавить

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

для вашего тела электронной почты и класса css, например:

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

может быть интересно, что Outlook и Outlook Express могут генерировать эти составные форматы электронной почты изображений, Если вы вставляете файлы изображений с помощью функции меню Вставка / изображение.

очевидно, что тип электронной почты должен быть установлен в HTML (не прямым текстом).

любой другой метод(например, перетаскивание или любой вызов командной строки) приводит к тому, что изображение (ы) отправляется как вложение.

Если вы отправите такое письмо к себе, вы можете увидеть, как это отформатирован! :)

FWIW, я ищу автономный исполняемый файл windows, который делает встроенные изображения из режима командной строки, но, похоже, их нет. Это путь, по которому многие поднялись... Можно сделать это с помощью Outlook Express, передав его соответствующим образом отформатированным .эмл файл.

для тех, кто не мог получить одно из этих решений работать: отправить рисунок по электронной почте Следуя шагам, изложенным в решении, предлагаемом @T30, я смог получить свое встроенное изображение для отображения без блокировки outlook (предыдущие методы были заблокированы). Если вы используете exchange, как и мы, то также при выполнении:

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

вам нужно будет передать его Ваш url-адрес службы exchange. Кроме того, следующее это решение должно позволить вам легко отправить встроенные imgages.

Если вы используете Outlook для отправки статического изображения с гиперссылкой, простой способ - использовать Word.

  1. открыть MS Word
  2. скопируйте изображение на пустую страницу
  3. добавить гиперссылку на изображение (Ctrl + K)
  4. скопируйте изображение на свой адрес электронной почты