Как отобразить встроенные изображения в кодировке Base64 в электронной почте Outlook - PullRequest
Новая
       23

Как отобразить встроенные изображения в кодировке Base64 в электронной почте Outlook

0 голосов
/ 09 июля 2019

Я работаю над приложением, которое отправляет уведомления пользователям по электронной почте.Приложение содержит функциональность, позволяющую пользователю создавать электронную почту, отображать ее в своем браузере, а затем отправлять эту электронную почту.Мы разработали его для использования изображений в кодировке Base64, которые встроены в CSS следующим образом: 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Notification Email</title>
    <style>

        html {
            box-sizing: border-box;
            overflow: -moz-scrollbars-vertical;
            overflow-y: scroll;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        .bg {
            flex: 1 1 0px;
            letter-spacing: 2px;
            color: white;
            text-transform: uppercase;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            padding: 1vh 0;
        }

        .bg:nth-child(1) {
            background-color: #DC1431;
            background-image: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ijc5OS45IC0xNjEuOSA1MjEuMSAyMzguNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyA3OTkuOSAtMTYxLjkgNTIxLjEgMjM4Ljc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNFMzE4Mzc7fQ0KCS5zdDF7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9DQoJLnN0MntmaWxsOiMwMDczQ0Y7fQ0KCS5zdDN7ZmlsbDp1cmwoI1NWR0lEXzJfKTt9DQoJLnN0NHtmaWxsOiMwMTIxNjk7fQ0KCS5zdDV7ZmlsbDp1cmwoI1NWR0lEXzNfKTt9DQoJLnN0NntmaWxsOiMwMDUyQzI7fQ0KCS5zdDd7ZmlsbDp1cmwoI1NWR0lEXzRfKTt9DQo8L3N0eWxlPg0KPHJlY3QgeD0iNzk5LjkiIHk9Ii0xNjEuNSIgY2xhc3M9InN0MCIgd2lkdGg9IjUyMS4xIiBoZWlnaHQ9IjIzOC43Ii8+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE5OC45NDE0IiB5MT0iMTUwOC4zMDQ5IiB4Mj0iMz22LjQ4MjciIHkyPSIxMjU0LjkzNDQiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgODYzLjA3IDE0MzYuMjAwMSkiPg0KCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNDNDEyMzAiLz4NCgk8c3RvcCAgb2Zmc2V0PSI5LjAwMDAwMGUtMDAyIiBzdHlsZT0ic3RvcC1jb2xvcjojQ0IxMzMxO3N0b3Atb3BhY2l0eTowLjc5Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC4xOCIgc3R5bGU9InN0b3AtY29sb3I6I0QxMTUzMztzdG9wLW9wYWNpdHk6MC41OCIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuMjkiIHN0eWxlPSJzdG9wLWNvbG9yOiNENzE2MzQ7c3RvcC1vcGFjaXR5OjAuNCIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuNCIgc3R5bGU9InN0b3AtY29sb3I6I0RCMTYzNTtzdG9wLW9wYWNpdHk6MC4yNSIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuNTIiIHN0eWxlPSJzdG9wLWNvbG9yOiNERjE3MzY7c3RvcC1vcGFjaXR5OjAuMTQiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjY1IiBzdHlsZT0ic3RvcC1jb2xvcjojRTExODM3O3N0b3Atb3BhY2l0eTo2LjAwMDAwMGUtMDAyIi8+DQoJPHN0b3AgIG9mZnNldD0iMC43OSIgc3R5bGU9InN0b3AtY29sb3I6I0UzMTgzNztzdG9wLW9wYWNpdHk6MS4wMDAwMDBlLTAwMiIvPg0KCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMzE4Mzc7c3RvcC1vcGFjaXR5OjAiLz4NCjwvbGluZWFyR3JhZGllbnQ+DQo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTMyMSw3Ny4ydi0yMzguN2gtMzguOWMtMTU0LDQ4LjItMzE3LjEsMTQzLjYtNDQwLjIsMjM4LjdIMTMyMXoiLz4NCjwvc3ZnPg0K);
        }

        .bg:nth-child(2) {
            background-color: #0073CF;
            background-image: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ijc5OS45IDEzMC41IDUyMS4xIDIzOC43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDc5OS45IDEzMC41IDUyMS4xIDIzOC43OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRTMxODM3O30NCgkuc3Qxe2ZpbGw6dXJsKCNTVkdJRF8xXyk7fQ0KCS5zdDJ7ZmlsbDojMDA3M0NGO30NCgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8yXyk7fQ0KCS5zdDR7ZmlsbDojMDEyMTY5O30NCgkuc3Q1e2ZpbGw6dXJsKCNTVkdJRF8zXyk7fQ0KCS5zdDZ7ZmlsbDojMDA1MkMyO30NCgkuc3Q3e2ZpbGw6dXJsKCNTVkdJRF80Xyk7fQ0KPC9zdHlsZT4NCjxyZWN0IHg9Ijc5OS45IiB5PSIxMzAuOCIgY2xhc3M9InN0MiIgd2lkdGg9IjUyMS4xIiBoZWlnaHQ9IjIzOC43Ii8+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE5OC45NDE0IiB5MT0iMTIxNS45NSIgeDI9IjM2My40ODI3IiB5Mj0iOTYyLjU3OTQiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgODYzLjA3IDE0MzYuMjAwMSkiPg0KCTxzdG9wICBvZmZzZXQ9IjguMDAwMDAwZS0wMDIiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDUyQzIiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjE2IiBzdHlsZT0ic3RvcC1jb2xvcjojMDA1OUM1O3N0b3Atb3BhY2l0eTowLjgiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjI1IiBzdHlsZT0ic3RvcC1jb2xvcjojMDA2MEM3O3N0b3Atb3BhY2l0eTowLjU5Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC4zNSIgc3R5bGU9InN0b3AtY29sb3I6IzAwNjZDQTtzdG9wLW9wYWNpdHk6MC40MSIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuNDUiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDZBQ0M7c3RvcC1vcGFjaXR5OjAuMjYiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjU2IiBzdHlsZT0ic3RvcC1jb2xvcjojMDA2RUNEO3N0b3Atb3BhY2l0eTowLjE0Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC42OCIgc3R5bGU9InN0b3AtY29sb3I6IzAwNzFDRTtzdG9wLW9wYWNpdHk6Ni4wMDAwMDBlLTAwMiIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuODEiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDczQ0Y7c3RvcC1vcGFjaXR5OjEuMDAwMDAwZS0wMDIiLz4NCgk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDA3M0NGO3N0b3Atb3BhY2l0eTowIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHBhdGggY2xhc3M9InN0MSIgZD0iTTg0MS45LDM2OS41SDEzMjFWMTMwLjho33M4LjlDMTEyOC4xLDE3OSw5NjQuOSwyNzQuNSw4NDEuOSwzNjkuNXoiLz4NCjwvc3ZnPg0K);
        }

        .bg:nth-child(3) {
            background-color: #0052C2;
            background-image: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ijc5OS45IDQxNi41IDUyMS4xIDIzOC43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDc5OS45IDQxNi41IDUyMS4xIDIzOC43OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRTMxODM3O30NCgkuc3Qxe2ZpbGw6dXJsKCNTVkdJRF8xXyk7fQ0KCS5zdDJ7ZmlsbDojMDA3M0NGO30NCgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8yXyk7fQ0KCS5zdDR7ZmlsbDojMDEyMTY5O30NCgkuc3Q1e2ZpbGw6dXJsKCNTVkdJRF8zXyk7fQ0KCS5zdDZ7ZmlsbDojMDA1MkMyO30NCgkuc3Q3e2ZpbGw6dXJsKCNTVkdJRF80Xyk7fQ0KPC9zdHlsZT4NCjxyZWN0IHg9Ijc5OS45IiB5PSI0MTYuOCIgY2xhc3M9InN0NiIgd2lkdGg9IjUyMS4xIiBoZWlnaHQ9IjIzOC43Ii8+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE5OC45NDE0IiB5MT0iOTI5Ljk1IiB4Mj0iMzYzLjQ4MjciIHddPSI2NzYuNTc5NCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSA4NjMuMDcgMTQzNi4yMDAxKSI+DQoJPHN0b3AgIG9mZnNldD0iMi4wMDAwMDBlLTAwMiIgc3R5bGU9InN0b3AtY29sb3I6IzAxMjE2OSIvPg0KCTxzdG9wICBvZmZzZXQ9IjMuMDAwMDAwZS0wMDIiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMTIzNkM7c3RvcC1vcGFjaXR5OjAuOTciLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjEzIiBzdHlsZT0ic3RvcC1jb2xvcjojMDEzMTg2O3N0b3Atb3BhY2l0eTowLjY3Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC4yNSIgc3R5bGU9InN0b3AtY29sb3I6IzAwM0Q5QztzdG9wLW9wYWNpdHk6MC40MiIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuMzciIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDQ2QUQ7c3RvcC1vcGFjaXR5OjAuMjMiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjUyIiBzdHlsZT0ic3RvcC1jb2xvcjojMDA0REI5O3N0b3Atb3BhY2l0eTowLjEiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjY5IiBzdHlsZT0ic3RvcC1jb2xvcjojMDA1MUMwO3N0b3Atb3BhY2l0eToyLjAwMDAwMGUtMDAyIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6IzAwNTJDMjtzdG9wLW9wYWNpdHk6MCIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik04NDEuOSw2NTUuNUgxMzIxVjQxNi44aC0zOC45QzExMjguMSw0NjUsOTY0LjksNTYwLjUsODQxLjksNjU1LjV6Ii8+DQo8L3N2Zz4NCg==);
        }

        .bg:nth-child(4) {
            background-color: #012169;
            background-image: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ijc5OS45IDY5Mi41IDUyMS4xIDIzOC43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDc5OS45IDY5Mi41IDUyMS4xIDIzOC43OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRTMxODM3O30NCgkuc3Qxe2ZpbGw6dXJsKCNTVkdJRF8xXyk7fQ0KCS5zdDJ7ZmlsbDojMDA3M0NGO30NCgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8yXyk7fQ0KCS5zdDR7ZmlsbDojMDEyMTY5O30NCgkuc3Q1e2ZpbGw6dXJsKCNTVkdJRF8zXyk7fQ0KCS5zdDZ7ZmlsbDojMDA1MkMyO30NCgkuc3Q3e2ZpbGw6dXJsKCNTVkdJRF80Xyk7fQ0KPC9zdHlsZT4NCjxyZWN0IHg9Ijc5OS45IiB5PSI2OTIuOCIgY2xhc3M9InN0NCIgd2lkdGg9IjUyMS4xIiBoZWlnaHQ9IjIzOC4zIi8+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE5OC45MTMzIiB5MT0iNjU0LjE2NDUiIHgyPSIzNjMuMzk3NiIgeTI9IjQwMC44ODE2IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDg2My4wNyAxNDM2LjIwMDEpIj4NCgk8c3RvcCAgb2Zmc2V0PSI5LjAwMDAwMGUtMDAyIiBzdHlsZT0ic3RvcC1jb2xvcjojMDAwQTIzIi8+DQoJPHN0b3AgIG9mZnNldD0iMC4xOCIgc3R5bGU9InN0b3AtY29sb3I6IzAwMTEzNztzdG9wLW9wYWNpdHk6MC43MSIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuMzciIHN0eWxlPSJzdG9wLWNvbG9yOiMwMTFBNTM7c3RvcC1vcGFjaXR5OjAuMzEiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjYxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDExRjY0O3N0b3Atb3BhY2l0eTo3LjAwMDAwMGUtMDAyIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6IzAxMjE2OTtzdG9wLW9wYWNpdHk6MCIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik04NDEuOSw5MzEuMkgxMzIxVjY5Mi44aC0zOC45QzExMjguMSw3NDEsOTY0LjksODM2LjMsODQxffOTMxLjJ6Ii8+DQo8L3N2Zz4NCg==);
        }


        body {
            margin: 0;
            background: #fafafa;
            font-family: 'Connections';
            font-size: 12px
        }

    </style>
</head>

<body>
    <div class="content">
        <div class="head">
            <span class="bg">Initech</span>
            <span class="bg">Initrode</span>
            <span class="bg">Inacan</span>
            <span class="bg">Inabag</span>
        </div>

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

Попытка просмотреть это в Outlook 2013, надеясь, что кто-то может сказать мне, если это дажевозможный.

Ответы [ 2 ]

1 голос
/ 09 июля 2019

Свойство background-image из CSS не поддерживается в Outlook.Подробнее об этом можно прочитать в следующих статьях:

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

    Set objOL = CreateObject("Outlook.Application")
    Set objMail = objOL.CreateItem(olMailItem)
    objMail.Attachments.Add "C:\pictest.jpg"
    objMail.HTMLBody = "<html><p>This is a picture.</p>" & _
                   "<img src='cid:pictest.jpg' height=480 width=360>"
    objMail.Display

См. Чтобы добавить встроенное изображение в сообщение HTML для получения дополнительной информации.

0 голосов
/ 09 июля 2019

Word (который отображает HTML-сообщения в Outlook) не поддерживает изображения base64, встроенные в тело HTML. Он поддерживает только внешние изображения и изображения, хранящиеся во вложениях.

...