встраивание изображения в HTML письмо - PullRequest
Новая
       133

встраивание изображения в HTML письмо

98 голосов
/ 15 июля 2011

Я пытаюсь отправить составное / связанное 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--

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

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

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

Ответы [ 11 ]

122 голосов
/ 15 июля 2011

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

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

// РЕДАКТИРОВАТЬ: О, я просто понимаю, что если вы вставите первый фрагмент кода из моего поста, чтобы написать электронное письмо с помощью thunderbird, thunderbird автоматически изменит код HTML, чтобы он выглядел почти так же, как второй код в моем сообщении. 1011 *

15 голосов
/ 02 февраля 2017

Другое решение - прикрепить изображение как вложение, а затем сослаться на его 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();
9 голосов
/ 08 января 2014

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

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

Тогда это будет работать

7 голосов
/ 14 марта 2013

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

4 голосов
/ 16 ноября 2014

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

Следовательно,

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

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

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

base64 test.jpg
2 голосов
/ 04 января 2019

Я знаю, что это старый пост, но текущие ответы не учитывают тот факт, что Outlook и многие другие провайдеры электронной почты не поддерживают встроенные изображения или изображения CID.Самый эффективный способ разместить изображения в письмах - разместить их в Интернете и разместить ссылку на них в письме.Для небольших списков адресов электронной почты общедоступный дропбокс работает нормально.Это также уменьшает размер электронного письма.

2 голосов
/ 15 августа 2018

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

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

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

2 голосов
/ 10 февраля 2015

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

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

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

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

1 голос
/ 09 сентября 2017

На самом деле очень хороший пост в блоге, в котором перечислены плюсы и минусы трех разных подходов к этой проблеме Мартина Дэвиса. Вы можете прочитать это в 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];
}
1 голос
/ 07 ноября 2014

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

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

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

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

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

Страница:
...