Ошибка с изображением в HTML подписи электронной почты - PullRequest
Новая
       13

Ошибка с изображением в HTML подписи электронной почты

0 голосов
/ 10 июня 2019

У меня есть почти базовая подпись электронной почты в формате HTML, которая отлично работает, за исключением одной части. Я хочу, чтобы изображение в подписи также было ссылкой, чтобы, когда получатель щелкает изображение, его можно было перенаправить на мой веб-сайт. Однако я реализовал два разных способа, которые показывают разные проблемы.

Первый способ, который я попробовал, ниже. <td> из <tr> имеет фоновое изображение изображения, а также в <tr> ниже <td> имеется div того же размера изображения, заключенного в родительский элемент <a> , <div> имеет z-индекс выше, чем у изображения, и должен располагаться «сверху» изображения. Иногда при отправке электронных писем это выглядит правильно, но иногда это выглядит так: https://imgur.com/a/gErbeII, в результате чего <div> находится над изображением. 

<table>
    <tr>
        <td background="url('link-to-image')" style="display: block !important; margin-left: -2px !important; width: 165px !important; height: 38px !important; background-image: url('http://www.sykes.capital/sykes-capital-logo.jpg'); background-size: cover; background-repeat: no-repeat; padding: 0px;">    </td>
         <a href="link-to-website">
             <div style="position: absolute; z-index: 999; display: block !important; margin-left: -2px !important; width: 165px !important; height: 45px !important; padding: 0px;"></div>
         </a>
     </tr>
 </table>

Второй способ, который я попробовал, был ниже. 

<table>
    <tr>
        <a href="link-to-website">
            <img src="link-to-image" width="165" height="38" />
        </a>
     </tr>
 </table>

Однако, делая это таким образом, это выглядит так: https://imgur.com/a/fZQcwO2 Необработанное изображение, из которого извлекается подпись электронной почты в формате HTML, больше, чем размер 165x38, указанный в подписи, но при уменьшении размера изображения в сети это снижает качество.

Я также пытался уменьшить DPI до 72, но это тоже не сработало.

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Кодирование электронной почты возвращается к основам.Кодировать с помощью divs сложно, так как вам понадобятся резервные копии для почтовых клиентов, таких как Outlook.Фоновые изображения такие же, перспективы вызывают много проблем.

Лучше всего будет использовать второй подход, но не пропустите td (его нет в вашем примере выше). 

<table>
    <tr>
        <td>
            <a href="link-to-website">
                <img src="link-to-image" width="165" height="38" style="border:0px;display:block;" />
            </a>
        </td>
     </tr>
 </table>

Я добавил две вещи к вашей ссылке:

  • Граница 0 : Вы можете поместить это в тег изображения как атрибут или тег тега,он будет делать то же самое.
  • Блок дисплея : без этого изображения имеют пространство под ним (удалите его, чтобы понять, что я имею в виду)

Giveвышеупомянутая попытка.Также, если вы используете изображения сетчатки, следите за тем, чтобы ширина и высота были на теге изображения.Outlook не очень хорошо читает стиль изображения, когда речь идет о ширине и высоте.

0 голосов
/ 10 июня 2019

Ваш второй подход верен. Используйте атрибуты width и height для управления размером изображения, размер оригинала в этом случае не имеет значения, как вы можете видеть ниже, однако убедитесь, что вы сохраняете правильное соотношение сторон. 

<div>
  <div>
    <a href="https://www.stackoverflow.com">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" width="101" height="24" />
    </a>
  </div>
  <div>
    <a href="https://www.stackoverflow.com">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" width="90" height="100" />
    </a>
  </div>
  <div>
    <a href="https://www.stackoverflow.com">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" width="150" height="20" />
    </a>
  </div>
  <div>
    <a href="https://www.stackoverflow.com">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" width="90" height="50" />
    </a>
  </div>
</div>
...