Как вставить HTML (включая изображения) в электронное письмо в Outlook 2016+ - PullRequest
1 голос
/ 09 мая 2020

Хотя Outlook отправляет электронные письма с кодом HTML по умолчанию, Microsoft, похоже, хочет усложнить нам самим писать это HTML. Одной из важных причин использования HTML является уменьшение размера сообщения электронной почты при вставке изображения с помощью тега <img> для доступа к изображению из Интернета вместо того, чтобы вставлять само изображение в тело сообщения электронной почты. .

Некоторые источники [например, 1 , 2 ] говорят, что способ сделать это - использовать «Вставить как текст» для вставки файла, содержащего HTML код. Но в Office 2016 параметр «Вставить как текст» больше не доступен по умолчанию. К счастью, есть также источники [например, 3 ], которые показывают, как его вернуть.

Однако, когда я попробовал это, Outlook не интерпретировал мой HTML. Так, например, если я создаю файл, содержащий строку:

<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">

, а затем использую «Вставить как текст», чтобы вставить эту строку в свое электронное письмо, результатом будет именно эта строка кода, не изображение. Что я делаю не так?

(Как указано в атрибуте alt, файл изображения в этом примере представляет собой просто случайное онлайн-изображение, которое появляется в одной из упомянутых выше статей. Я не связан с этим веб-сайтом. )

1 Ответ

1 голос
/ 09 мая 2020

Ответ очень прост. В каком-то смысле это очевидно, но с другой стороны - нет.

Ответ заключается в том, что каждый вставленный сегмент кода HTML должен быть полным файлом HTML, включая <!DOCTYPE>, <HTML> и <body> теги, а не только желаемый код HTML. Причина, по которой это неочевидно, заключается в том, что если вы вставляете несколько сегментов кода, каждый из них должен быть полным файлом HTML, чего вы никогда бы не сделали, когда на самом деле написали HTML. Я предполагаю, что происходит следующее: когда Outlook обнаруживает, что действительный файл HTML «вставлен как текст», он удаляет открывающий и закрывающий теги <!DOCTYPE>, <HTML> и <body>, а затем вставляет код, который находился между их - как HTML, а не как текст.

Итак, решение, которое я нашел, заключалось в том, что вместо единственной строки кода, показанной в вопросе, мне нужно «Вставить как текст» файл, содержащий:

<!DOCTYPE html>
<html>
<body>
<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">
</body>
</html> 

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

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

========== ==============

Добавлены подробности об использовании HTML в электронном письме:

Как указано в статье Lenetek указано в вопросе, Outlook не поддерживает все теги HTML. В частности, для встраивания изображений я обнаружил:

При отправке из Outlook: Outlook не поддерживает <figure> и <FigCaption>. Я обнаружил, что изображение и заголовок, помещенные в эти теги, визуализировались встроенными, просто игнорируя теги. Для перемещения к правому полю я обнаружил, что смог получить те же результаты, заменив <figure> на <table>, а затем поместив изображение и его заголовок внутри <TR><TD>...</TD></TR>.

При получении в Outlook : существуют различия в том, как разные почтовые клиенты интерпретируют HTML, вероятно, поэтому некоторые электронные письма содержат ссылку вверху для просмотра электронной почты в браузере. В частности, я читал, что Outlook ведет себя не лучшим образом в этом отношении. И это было в случае с моим изображением, плавающим вправо, о котором говорилось выше.

После выполнения трюка «Вставить как текст» изображение появилось правильно в правом поле черновика электронного письма в Outlook, но при отправке атрибут CSS style float игнорировался и таблица появилась сама по себе на левом поле без текста, обернутого вокруг нее. Я смог исправить это, заменив в теге <table> атрибут стиля float: right; на старомодный атрибут HTML align="right". При этом изображение и подпись корректно отображались в правом поле при получении в Outlook. Я не тестировал, как это выглядит в других почтовых клиентах.

...