图片不显示在 outlook 和 gmail 上

Question

正如标题所暗示的，我最近设计了一个电子邮件模板，但尽管我将它们上传到互联网，但图像不会显示（我相信它是如何完成的）。我没有尝试过任何付费托管服务，但据我所知，我认为这无关紧要。如果有人能帮助我，我将永远感激

<!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>

Answer 1

我猜您是在 Windows 上谈论桌面版 Outlook？

这是一个简单的用户安全设置，默认情况下 Outlook 和 Gmail 会阻止图片下载。 您 - 用户 将需要单击两个电子邮件客户端中的提示以下载该特定电子邮件的图像。可以通过简单的互联网搜索找到说明。

或者您可以更改您的默认设置以确保默认下载图像：

请注意： 这并不意味着您的 subscribers/customers 会收到这些带有默认下载图片的电子邮件。如上所述，这是针对每个用户的安全设置，您不应期望他们更改此设置以满足您的需要。您也不应该寻找绕过这些设置的方法。

另一个重要的建议是，出于这些基本原因（还有更多，但这里有两个重要的），不要过分依赖图像来传达重要信息：

图像屏蔽安全设置 - 将重要信息锁定在图像中，并且无法让不熟悉互联网或计算机的用户访问这些设置，这对他们来说是不公平的。
对于那些有残疾或障碍（在网络行业中也称为可访问性）的人，这些残疾或障碍阻碍了他们使用和使用互联网的方式。互联网供所有人使用，作为内容创建者，我们有责任确保遵守这些准则，我们尽最大努力确保尽可能多的人可以通过任何可能的方式访问我们的内容，包括个人屏幕阅读器设备。

尊重准则，发送您的电子邮件，希望收件人点击提示下载图片或已经更改设置。

图片不显示在 outlook 和 gmail 上

Images not showing on outlook and gmail

email

html-email