Outlookメールは、クリック時にのみ背景画像を読み込みます。

Question

私はしばらくの間これに苦労していましたが、何の答えも得られません。

HTMLテンプレートの背景属性を使用して、gmail、yahooなどのすべての電子メールクライアントで正常に動作する電子メールテンプレートで背景イメージを使用したかったのです。しかし、これはOutlookデスクトップ電子メールでは失敗します。 これは私がVMLを使用し、それを行うことができたためです。

しかし、この問題は、背景領域をクリックした後にのみ背景画像が読み込まれることが原因です。

<table width='600' height='800' align='center' style='min-hwight:800px;' cellpadding='0' cellspacing='0'> 
<tr> 
    <td background='[background-image]' bgcolor='#baeef7' width='600' height='800' valign='top' align='center'> 
     <!--[if gte mso 9]> 
     <v:rect xmlns:v='urn:schemas-microsoft-com:vml' fill='true' stroke='false' style='width:600px;height:800px;'> 
     <v:fill type='tile' src='[background-image]' color='#baeef7' /> 
     <v:textbox inset='0,0,0,0'> 
     <![endif]--> 
     <div> 
      <table align='center' width='600' height='800' style='width:600px;height:800px' cellpadding='0' cellspacing='0'> 
       <tr height='80'> 
        <td width='175' style='width:175px;text-align:right;' align='right'> 
         Header Image 
        </td> 
        <td width='250' style='width:250px;'></td> 
        <td width='175' style='width:175px'></td> 
       </tr> 
       <tr> 
        <td width='175' valign='bottom' style='width:175px'><img src='https://www.subsource.com/ContentPages/images/template-1-175.png' alt='' /></td> 
        <td width='250' height='160' valign='middle' style='padding:0 7px;width:250px'> 
         <span style='font-size:36px;text-align:left;color:#fff;text-transform:uppercase;display:block; font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;font-weight:bold;letter-spacing: 1px;'> 
          Some Text HERE 
         </span> 
         </td> 
        <td width='175' style='width:175px' valign='bottom'></td> 
       </tr> 
       <tr height='250'> 
        <td width='175' style='width:175px'>&nbsp;</td> 
        <td style='width:250px;height:250px;text-align:center;width:175px' height='250' width='250' cellpadding='0' cellspacing='0'> 
         <div style='background-color: #FFFFFF;margin:0;padding:0;width:250px;height:250px;'> 
          Image Here 
         </div> 
        </td> 
        <td width='175' style='width:175px'>&nbsp;</td> 
       </tr> 
       <tr> 
        <td width='175' valign='top' style='width:175px'>&nbsp;</td> 
        <td width='250' valign='top' style='width:250px;color: #119346; text-align: left; font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;padding:0 7px'> 

         <div style='font-size: 30px;line-height:1; font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;text-transform:capitalize;font-weight:bold;'>Hello Abc</div> 
         <div style='font-size: 17px;line-height:1;margin-top: 4px;font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;text-transform:capitalize;font-weight:bold;'> Address: 123 456 798 789 </div> 
         <div style='font-size: 15px;line-height:18px; font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;margin-top:5px;'> Some text goes here. Some text goes here. Some text goes here. Some text goes here. 
         </div> 
        </td> 
        <td width='175' valign='top' style='width:175px'>&nbsp;</td> 
       </tr> 
       <tr> 
        <td width='175' height='65' style='width:175px'></td> 
        <td width='250' height='65' style='width:250px'></td> 
        <td width='175' height='65' style='width:175px'></td> 
       </tr> 
       <tr height='30'> 
        <td colspan='3'>&nbsp;</td> 
       </tr> 
      </table> 
     </div> 
    <!--[if gte mso 9]> 
    </v:textbox> 
    </v:rect> 
    <![endif]--> 
    </td> 
</tr></table> 

解決策を提案してください。これは私が達成する必要がある要件です。

おかげ

Answer 1

は、あなたのコードからすべてvalignalignを排除してください。 bgcolorではなく、background-colorを使用しないでください。

これは同じ問題が発生した後、私の問題を解決しました。それは試してみる価値がある。