Как вставлять изображения в электронные письма?

#html #outlook #html-email

#HTML #outlook #html-электронная почта

Вопрос:

Я хочу отправить письмо с логотипом и HTML-шаблоном. Я добавил свой код сюда;

  <div style="max-width: 31.250em; background-color:#fcf9f2;margin:auto;font-family: 'Open Sans', serif;
    font-size: 13px;">
    <div class="row">
        <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#e0e0e1">
            <tr>
                <td align="center">
            <tr>
                <td align="center">
                    <table border="0" align="center" width="50%" cellpadding="0" cellspacing="0"
                           class="container590">
                        <td height="50" style="line-height:55px;">
                            <a href=""
                               style=" border-style: none !important; border: 0 !important;"><img
                                    width="0.08em" height="40px" border="0"
                                    style="display:block; width: 170px;"
                                    src="https://www.yemeksepeti.com/assets/images/logo.png?v=1553756111693"
                                    alt="Yemek Sepeti"/></a>
                        </td>
                        </tr>
                    </table>
                </td>
            </tr>
            </td>
            </tr>
        </table>
    </div>
</tr>
    <div style="opacity: 0.9;margin-top:4.375em;margin-left: 3%;margin-right: 2%">
        <p>  %NameSurname%</p>
    </div>
    <div style="border-style: solid;border-top-width:1px;border-color:#c6c8ca;opacity: 0.9;margin-top:4.375em;margin-left: 3%;margin-right: 2%">
        <table>
            <tr>

                <td> %EMAIL%</td>
            </tr>
            <tr>
                <td style="text-align: initial"> %PASS%</td>
            </tr>

        </table>
    </div>

</br>

Когда я отправляю почту, логотип не отображается, а в теге img указано blockingsrc.

Я пытался записать base64 в src, но это не сработало.

1. Вы пробовали <img src="data:img/jpg;base64, {{base-64 string}}" /> ?

2. Изображения Base64 не работают с большинством почтовых клиентов.

3. попробуйте изменить ширину тега img на размер пикселя и посмотрите, имеет ли это значение. У вас ширина 0,08em, и я сомневаюсь, что Outlook будет правильно читать. Кроме того, Outlook не считывает ширину в стилях.

4. @Syfer Я пытался, но заметил изменения. Я изменил их на пиксели, убрал ширину, но все равно не вижу логотипа

5. Какой почтовый клиент не показывает изображение?

Ответ №1:

Попробуйте этот способ, возможно, вы писали неправильно.

<img src="data:img/jpg;base64, {{base-64 string}}" />

1. @d.k могу ли я узнать тип изображения? нравится, что это jpg или png?

2. мой тип изображения — png

3. Outlook (который использует Word для отображения HTML-изображений) не поддерживает изображения, встроенные таким образом.

4. @d.k тогда это должно быть <img src="data:img/png;base64, {{base-64 string}}" />

Ответ №2:

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

Поэтому,

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

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

<img src="data:img/jpg;base64, {{base-64 string}}" />

1. Я использовал <img src=»data: img / jpg; base64, {{строка base-64}}» /> но отметил изменение

2. Базовые 64 изображения определенно не вариант. Они не работают в большинстве почтовых клиентов.

3. @gwally Что я могу использовать? у вас есть какие-либо предложения?

4. Outlook не отображает изображения, встроенные таким образом.

5. @d.k Размещает ваши изображения.

Ответ №3:

Вам нужно добавить изображение в качестве вложения и задать его Content-ID заголовок MIME (например, «xyz»). Затем ваше тело HTML может ссылаться на это изображение, используя src атрибут (например <img src="cid:xyz"> )