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

65

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

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

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

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

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

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

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

  • 0
    Быстрый вопрос: размещаете ли вы эти изображения вне сайта или встраиваете их прямо в электронную почту?
  • 0
    Часть моего вопроса действительно, я могу сделать либо. Я пытаюсь здесь их встроить, но безуспешно. Если я просто сделаю ссылку на них, многие пользователи не увидят изображения без предварительной их загрузки, чего я бы хотел избежать.
Показать ещё 6 комментариев
Теги:
email
image
mime

9 ответов

99
Лучший ответ

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

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

//EDIT: О, я просто понимаю, если вы вставляете первый фрагмент кода из моего сообщения, чтобы написать письмо с thunderbird, thunderbird автоматически изменяет html-код, чтобы он выглядел почти так же, как второй код в моем сообщении.

Поделиться
  • 3
    попробовал сначала, у меня не работает электронная почта. отлично работает для просмотра в IE / Firefox, но не отправляется по электронной почте.
  • 0
    Возможно, вы знаете способ (каким будет тип контента? Text / html? Заголовки электронной почты, которые мне нужно знать, чтобы отправить смешанный файл html / image таким образом)
Показать ещё 8 комментариев
8

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

  • Проблема заключается в том, что вы используете 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--

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

Поделиться
  • 0
    Борьба на этом. Я кодировал точно так же, как выше, но изображение не появляется (просто рамка с альтернативным текстом; текст работает нормально). Мой Content-ID - <filename.jpg>, поэтому мой href = "cid: filename.jpg" - есть какой-то особый трюк со значением или синтаксисом Content-ID и cid:?
  • 0
    Я проверил с RFC2392 и выражение CID, кажется, является действительным. Но это все еще не отображается.
Показать ещё 1 комментарий
7

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

Код HTML:

<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("[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();
Поделиться
6

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

Поделиться
  • 3
    img2hmtl - самое дурацкое решение / идея, которую я когда-либо видел. +1
4

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

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

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

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

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

base64 test.jpg
Поделиться
0

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

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

  • Все происходит внутри multipart/mixed.

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

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

Поделиться
  • 9
    Было бы полезно, если бы вы включили пример.
  • 5
    Еще более полезной будет ссылка на спецификацию.
0

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

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

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

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

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

Поделиться
-17

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

  • Открыть MS Word
  • Скопировать изображение на пустую страницу
  • Добавить гиперссылку на изображение (Ctrl + K)
  • Скопировать изображение на адрес электронной почты
Поделиться
  • 28
    это ранит мои глаза

Ещё вопросы

Сообщество Overcoder
Наверх
Меню