Блог

Главная - Вопросы по программированию - Изображения, не отображаемые в Outlook и gmail

Изображения, не отображаемые в Outlook и gmail

#email #html-email

Вопрос:

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,inital-scale=1.0 shrink-to-fit=no">
    <title>FMTC Safety</title>
    <style type="text/css">
      @media screen and (max-width:600px) {
              .review-image{
                    margin-left: 5% !important;
                    position: relative !important;
                    bottom: 9px !important;
                }
                .paragraph1{
                  Margin-left: 53% !important;
                  position: relative !important;
                  bottom: 5px !important;
                }
                 .secure-payment{
                     Margin-bottom:0 !important;
                     display:inline !important;
                 }
                 .grey-card{
                     Margin:0 !important;
                    padding-left:5px !important;
                 }
                 .grey-card-text{
                  bottom: 0px !important;
                 }
                  .info{
                      Margin-top:8% !important;
                      Margin-bottom:4% !important;
                  }

                  .methods{
                      Margin-left:10px !important;
                  }
                  .norisk{
                    Margin-top:5% !important;
                    Margin-left:11% !important;
                  }
                  .expire-date em{
                    Margin-top:12px !important;
                  }
                 }
                 @media screen and (min-width:600px){
                   p br{
                     display:none !important;
                   }
                  
                 }
    </style>
  </head>
  <body style="Margin:0;padding:0;background-color:#f6f9fc;font-size:15px;font-weight:lighter;">
    <center class="wrap">
      <div class="webkit" style="max-width:600px;background-color:#ffffff;">
        <table class="outer" text-align="center" style="Margin:0 auto;width:100%;max-width:600px;border-spacing:0;font-family:sans-serif;clear:black;">
          <tr>
            <td style="padding:0;">
              <table width="100%" style="border-spacing:0;">
                <tr>
                  <td style="padding:0;background-color: #f7f7f7;padding-top:30px;text-align:start;">
                    <a href="#"><img src="https://i.ibb.co/WGPbJzr/logo.png" style="Margin-left: 19px;" alt="logo"></a>
                    <a href="#"><img class="review-image" src="https://i.ibb.co/YhCqw7p/review.png" alt="customer reviews" style="border:0;Margin-left:45%;position:relative;bottom:13px;"></a>
                    <p class="paragraph1" style="Margin-left:75%;Margin-top:-15px;"><em style="font-weight: bold;font-style: normal;">4.6</em> uit 1006 reviews</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td style="padding:0;">
              <p style="padding:20px;padding-left: 40px;">Dear sir, Madam</p>
              <p style="padding-left:40px;padding-bottom:20px;line-height: 22px;">We send you this email about one or more certificates that are about to expire. <br>
                Below you can find an overview.
                        </p>
              <h4 style="padding-left:40px;padding-bottom:20px;">HWO Module First Aid</h4>
              <img src="https://i.ibb.co/31P1YHb/yellow-check.png" style="border:0;padding-left:40px;Margin-bottom:-50px;" alt="Checkmark">
              <p class="expire-date" style="padding-left:70px;Margin-top:0;padding-bottom:20px">Joost De haan (03-03-1990) - <br> <br>  <em style="font-weight: bold;font-style:normal">expires : 13-08-2021</em></p>
              <button style="Margin-left:40px;font-weight:bold;Margin-right:3%;padding:12px 17px;background-color: #289916;color:white; border:none;font-family: Arial, Helvetica, sans-serif;font-size:17px;">Check availability</button>
              <p class="norisk" style="display:inline-flex;font-style:italic;color:grey;">No risk: Free cancelation</p>
              <h4 style="padding-left:40px;padding-top:10px;padding-bottom:0px;Margin-bottom:2.5%;">Reserve your place now</h4>
              <table style="border-spacing:0;padding-left: 40px;padding-bottom: 20px;line-height:30px;">
                <tr>
                  <td style="padding:0;"><img src="https://i.ibb.co/h8KNyXR/check.png" style="border:0;padding-right:10px;" alt="checkmark"></td>
                  <td style="padding:0;">Do your training when it suits you</td>
                </tr>
                <tr>
                  <td style="padding:0;"><img src="https://i.ibb.co/h8KNyXR/check.png" style="border:0;padding-right:10px;" alt="checkmark"></td>
                  <td style="padding:0;">Our trainings are never cancelled</td>
                </tr>
                <tr>
                  <td style="padding:0;"><img src="https://i.ibb.co/h8KNyXR/check.png" style="border:0;padding-right:10px;" alt="checkmark"></td>
                  <td style="padding:0;">Reserve your training within a few minutes</td>
                </tr>
              </table>
              <h5 class="secure-payment" style="padding-left:40px;padding-bottom:0px;Margin-bottom:0;position:relative;">Secure payment with:</h5>
              <img class="grey-card" src="https://i.ibb.co/TKkHwFn/card-type.png" style="border:0;padding-left:40px;Margin-bottom:2.8%;width:25px;height:15px;" alt="payment card"><span class="grey-card-text" style="position:relative;bottom:19px;color:grey;Margin-left:1%;">Prepaid</span>
              <img class="methods" src="https://i.ibb.co/pWS0nd7/cards.png" alt="credit/debit cards" style="border:0;">
              <p class="info" style="padding-left:40px;padding-bottom:0px;Margin-bottom:1%;Margin-top:3%">If you have any questions regarding this email,please contact us on</p>
              <strong style="padding-left:40px;padding-bottom:20px;font-weight:bold"> 31 (0)85 130 74 61 <span style="font-weight: lighter;">or </span> info<em style="font-weight: lighter;">@</em>fmtcsafety.com</strong>
            </td>
          </tr>
          <tr>
            <td style="padding:0;">
              <p style="font-size:11px;padding-left:40px;padding-bottom:20px;padding-top:20px;">Don't want to recieve these notifications in the future? Click <a href="#">here to unsubscribe</a></p>
            </td>
          </tr>
        </table>
      </div>
    </center>
  </body>
</html>

Ответ №1:

Я предполагаю, что вы говорите о Outlook для рабочего стола в Windows?

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

Кроме того, вы можете изменить настройки по умолчанию, чтобы обеспечить загрузку изображений по умолчанию:

  1. Перспективы — https://support.microsoft.com/en-us/office/block-or-unblock-automatic-picture-downloads-in-email-messages-15e08854-6808-49b1-9a0a-50b81f2d617a
  2. Gmail — https://support.google.com/mail/answer/145919?hl=en-GBamp;co=GENIE.Платформа=Desktop

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

Еще одно важное предложение-не слишком полагаться на ваши изображения, передающие важную информацию, по этим основным причинам (их больше, но вот два важных).:

  1. Настройки безопасности блокировки изображений — Если важная информация заблокирована в изображении и недоступна пользователю, который недостаточно разбирается в Интернете или компьютерах, чтобы разобраться в этих настройках, это несправедливо по отношению к ним.
  2. Для людей с ограниченными возможностями или нарушениями (также известными как доступность в веб-индустрии), которые препятствуют их способу использования и потребления Интернета. Интернет доступен для всех, и мы, как создатели контента, несем ответственность за соблюдение этих рекомендаций, и мы делаем все возможное, чтобы как можно больше людей могли получить доступ к нашему контенту любыми возможными способами, включая программы чтения с экрана на персональных устройствах.

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

Метки: ,