встраивание изображения в html email
Я пытаюсь отправить многостраничное / связанное html-письмо со встроенными gif-изображениями. Это письмо генерируется с помощью Oracle PL / SQL. Мои попытки не увенчались успехом, и изображение появилось как красный X (в Outlook 2007 и Yahoo mail)
Я отправлял html-письма в течение некоторого времени, но мои требования теперь использовать несколько gif-изображений в письме. Я могу хранить их на одном из наших веб-серверов и просто ссылаться на них, но многие пользователи почтовых клиентов не будут показывать их автоматически и будут необходимо либо изменить настройки, либо вручную загрузить их для каждого письма.
Итак, мои мысли-внедрить образ. Мои вопросы:
- что я здесь делаю не так?
- вложение подход правильным?
- любые другие варианты, если мне нужно использовать больше изображений? Вложения не будут работать, поскольку изображения обычно являются логотипами и значками, которые не будут иметь смысла из контекста сообщения. Кроме того, некоторые элементы электронной почты ссылки в онлайн-систему, поэтому создание статического 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 ответов
попробуйте вставить его напрямую, таким образом, вы можете вставить несколько изображений в разных местах в электронной почте.
<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();
Я не нахожу здесь полезных ответов, поэтому я предоставляю свое решение.
проблема в том, что вы используете
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--
тогда он будет работать
Если это не работает, вы можете попробовать один из этих инструментов, которые преобразуют изображение в таблицу HTML (остерегайтесь размера вашего изображения, хотя):
использование Base64 для вставки изображений в html является удивительным. Тем не менее, обратите внимание, что строки base64 могут сделать ваш размер электронной почты большим.
таким образом,
1) Если у вас много изображений, загрузка изображений на сервер и загрузка этих изображений с сервера может уменьшить размер вашей электронной почты. (Вы можете получить много бесплатных услуг через Google)
2) Если в вашей почте всего несколько изображений, использование строк base64, безусловно, является удивительным выбор.
помимо вариантов, предоставляемых существующими ответами, вы также можете использовать команду для создания строки base64 в linux:
base64 test.jpg
вам нужно 3 границы для встроенных изображений, чтобы быть полностью совместимым.
все идет внутри
multipart/mixed
.затем использовать
multipart/related
содержащегоmultipart/alternative
и заголовки вложений изображений.наконец, включите загружаемые вложения внутри последней границы
multipart/mixed
.
на самом деле есть очень хороший пост в блоге, в котором перечислены " за " и "против" трех разных подходов к этой проблеме Мартина Дэвиса. Вы можете прочитать его в https://sendgrid.com/blog/embedding-images-emails-facts/.
Я хотел бы добавить четвертый подход, используя фоновые изображения CSS.
добавить
<div id="myImage"></div>
на ваш e-mail в теле и 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, передав его в соответствующем формате .файл eml.
для тех, кто не смог получить одно из этих решений: отправить рисунок по электронной почте Следуя шагам, изложенным в решении, предлагаемом @T30, я смог получить встроенное изображение для отображения без блокировки outlook (предыдущие методы были заблокированы). Если вы используете exchange, как мы, то также при выполнении:
service = new ExchangeService(ExchangeVersion);
service.AutodiscoverUrl("email@domain.com");
SmtpClient smtp = new SmtpClient(service.Url.Host);
вам нужно будет передать ему свой url-адрес службы exchange. Помимо этого, следующее решение должно позволить вам легко отправить встроенные imgages.
Если вы используете Outlook для отправки статического изображения с гиперссылкой, простым способом было бы использовать Word.
- открыть MS Word
- скопируйте изображение на пустую страницу
- добавить гиперссылку на изображение (Ctrl + K)
- скопируйте изображение на свой email