不会在来自 iPhone 的 HTML 电子邮件中显示图像


Does not display images in HTML email from iPhone

您好,我想发送一封看起来像这样的电子邮件,其中包含图像。

<html>
<body paddingwidth="0" paddingheight="0" bgcolor="#d1d3d4"  style="padding-top: 0; padding-bottom: 0; padding-top: 0; padding-bottom: 0; background-repeat: repeat; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;" offset="0" toppadding="0" leftpadding="0">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tableContent bgBody" align="center" bgcolor="#F6F6F6" style='font-family:Helvetica, Arial,serif;'>
    <tr>
      <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
          <tr>
            <td class='movableContentContainer'  >

              <div class='movableContent'>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                   <tr><td height='25'  colspan='3'></td></tr>
                    <tr>
                      <td valign='top'  colspan='3'>
                        <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                          <tr>
                            <td align='left' valign='middle' >
                              <div class="contentEditableContainer contentImageEditable">
                                <div class="contentEditable" >
                                  <img src="mailtest/images/logo.png" alt='Compagnie logo' data-default="placeholder" data-max-width="301" width='301' height='78' >
                                </div>
                              </div>
                            </td>
                            <td align='right' valign='top' >
                              <div class="contentEditableContainer contentTextEditable" style='display:inline-block;'>
                                <div class="contentEditable" >
                                  <a href="[SHOWEMAIL]" style='color:#A8B0B6;font-size:13px;text-decoration:none;'>Open in your browser </a>
                                </div>
                              </div>
                            </td>
                            <td width='18' align='right' valign='top'>
                              <div class="contentEditableContainer contentImageEditable" style='display:inline-block;'>
                                <div class="contentEditable" >
                                  <a href="[SHOWEMAIL]"><img src="mailtest/images/openBrowser.png" alt='open in browser image' data-default="placeholder" width='15' height='15' style='padding-left:10px;'></a>
                                </div>
                              </div>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                </table>
              </div>
              <div class='movableContent'>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                        <tr><td height='25'  ></td></tr>
                        <tr>
                          <td height='290'  class='bgItem'>
                            <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                              <tr><td height='50' ></td></tr>
                              <tr>
                                <td width='350' >
                                  <div class="contentEditableContainer contentImageEditable">
                                    <div class="contentEditable" >
                                      <img src="mailtest/images/bigImg.png" alt='featured image' data-default="placeholder" data-max-width="300" width='326' height='269' >
                                    </div>
                                  </div>
                                </td>
                                <td width='250' valign='top'>
                                  <table width="250" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                                    <tr><td colspan='3' height='10'></td></tr>
                                    <tr>
                                      <td width='10'></td>
                                      <td width='230' valign='top'>
                                        <table width="230" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                                          <tr>
                                            <td valign='top'>
                                              <div class="contentEditableContainer contentTextEditable">
                                                <div class="contentEditable" >
                                                  <h1 style='font-size:24px;font-weight:normal;color:#ffffff;line-height:19px;'>Application 2.0</h1>
                                                </div>
                                              </div>
                                            </td>
                                          </tr>
                                          <tr><td height='18'></td></tr>
                                          <tr>
                                            <td valign='top'>
                                              <div class="contentEditableContainer contentTextEditable">
                                                <div class="contentEditable" >
                                                  <p style='font-size:13px;color:#cfeafa;line-height:19px;'>What does the app do?</p>
                                                </div>
                                              </div>
                                            </td>
                                          </tr>
                                          <tr><td height='33'></td></tr>
                                          <tr>
                                            <td>
                                              <div class="contentEditableContainer contentTextEditable">
                                                <div class="contentEditable" >
                                                  <a href="#" style='padding:15px;font-size:13px;text-decoration:none;background:#1C80C9;color:#E5F5FF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;'>Learn more, noob</a>
                                                </div>
                                              </div>
                                            </td>
                                          </tr>
                                          <tr><td height='15'></td></tr>
                                        </table>
                                      </td>
                                      <td width='10'></td>
                                    </tr>
                                  </table>
                                </td>
                              </tr>
                              <tr><td height='25'></td></tr>
                            </table>
                          </td>
                        </tr>
                        <tr><td height='25' ></td></tr>
                </table>
              </div>

              <div class='movableContent'>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'><tr><td>
                <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                  <tr><td colspan='3' height='25'></td></tr>
                  <tr>
                    <td width='50'></td>
                    <td width='500'>
                      <table width="500" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                        <tr>
                          <td align='center'>
                            <div class='contentEditableContainer contentTextEditable'>
                              <div class='contentEditable'>
                                <h1 style='font-size:32px;'>Introducing INvitor!
                                </h1>
                              </div>
                            </div>
                          </td>
                        </tr>
                        <tr><td height='20'></td></tr>
                        <tr>
                          <td align='center'>
                            <div class='contentEditableContainer contentTextEditable'>
                             <div class='contentEditable'>
                              <p >Benefits for users.<br>
                                Available on (when is it available?) on (platform? Chrome store? Desktop? PC? Mac? iPhone?)
                              </p>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </td>
                  <td width='50'></td>
                </tr>
                <tr><td colspan='3' height='45'></td></tr>
              </table>
              </td></tr></table>
            </div>
            <div class='movableContent'>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'><tr><td>
              <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" >
                <tr><td height='10'>&nbsp;</td></tr>
                <tr><td style='border-bottom:1px solid #DDDDDD'></td></tr>
                <tr><td height='10'>&nbsp;</td></tr>
              </table>
              </td></tr></table>
            </div>
            <div class='movableContent'>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'><tr><td>
              <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                <tr><td colspan='3' height='10'></td></tr>
                <tr>
                  <td width='30'></td>
                  <td width='540'>
                    <table width="500" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                      <tr>
                        <td align='center'>
                          <div class='contentEditableContainer contentTextEditable'>
                            <div class='contentEditable'>
                              <p >It’s been downloaded...</p>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr><td height='30'></td></tr>
                      <tr>
                        <td>
                          <div class='contentEditableContainer contentTextEditable'>
                            <div class='contentEditable'>
                              <table width="500" border="0" cellspacing="1" cellpadding="20" align="center" valign='top'>
                                <tr>
                                  <td align='center' bgcolor='#444444' style='border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;color:#ffffff;font-size:28px;'>1</td>
                                  <td align='center' bgcolor='#444444' style='border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;color:#ffffff;font-size:28px;'>3</td>
                                  <td align='center' bgcolor='#444444' style='border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;color:#ffffff;font-size:28px;'>3</td>
                                  <td align='center' style='color:#444444;font-size:28px;'>,</td>
                                  <td align='center' bgcolor='#444444' style='border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;color:#ffffff;font-size:28px;'>3</td>
                                  <td align='center' bgcolor='#444444' style='border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;color:#ffffff;font-size:28px;'>3</td>
                                  <td align='center' bgcolor='#444444' style='border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;color:#ffffff;font-size:28px;'>7</td>
                                </tr>
                              </table>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr><td height='45'></td></tr>
                      <tr>
                        <td align='center'>
                          <div class='contentEditableContainer contentTextEditable'>
                            <div class='contentEditable'>
                              <a href="#" class='link2'>Grab one quick!
                              </a>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </table>
                  </td>
                  <td width='30'></td>
                </tr>
                <tr><td colspan='3' height='45'></td></tr>
              </table>
              </td></tr></table>
            </div>
            <div class='movableContent'>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'><tr><td>
              <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" >
                <tr><td height='10'>&nbsp;</td></tr>
                <tr><td style='border-bottom:1px solid #DDDDDD'></td></tr>
                <tr><td height='10'>&nbsp;</td></tr>
              </table>
              </td></tr></table>
            </div>
            <div class='movableContent'>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'><tr><td>
              <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                <tr><td colspan='5' height='30'></td></tr>
                <tr>
                  <td>
                    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                      <tr>
                        <td width='166' valign='top'>
                          <table width="166" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                            <tr>
                              <td>
                                <div class='contentEditableContainer contentImageEditable'>
                                  <div class='contentEditable'>
                                    <img src="mailtest/images/featured1.png" alt='featured image' data-default="placeholder" data-max-width="166" width='165' height='165' >
                                  </div>
                                </div>
                              </td>
                            </tr>
                            <tr><td height='22'></td></tr>
                            <tr>
                              <td align='center'>
                                <div class='contentEditableContainer contentTextEditable'>
                                  <div class='contentEditable'>
                                    <h2>First Feature</h2>
                                  </div>
                                </div>
                              </td>
                            </tr>
                            <tr><td height='22'></td></tr>
                            <tr>
                              <td align='center'>
                                <div class='contentEditableContainer contentTextEditable'>
                                  <div class='contentEditable'>
                                    <p >A feature is a tangible aspect of the product.</p>
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </table>
                        </td>
                        <td width='51'></td>
                        <td width='166' valign='top'>
                          <table width="166" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                            <tr>
                              <td>
                                <div class='contentEditableContainer contentImageEditable'>
                                  <div class='contentEditable'>
                                    <img src="mailtest/images/featured2.png" alt='featured image' data-default="placeholder" data-max-width="166" width='165' height='165' >
                                  </div>
                                </div>
                              </td>
                            </tr>
                            <tr><td height='22'></td></tr>
                            <tr>
                              <td align='center'>
                                <div class='contentEditableContainer contentTextEditable'>
                                  <div class='contentEditable'>
                                    <h2>Second Feature</h2>
                                  </div>
                                </div>
                              </td>
                            </tr>
                            <tr><td height='22'></td></tr>
                            <tr>
                              <td align='center'>
                                <div class='contentEditableContainer contentTextEditable'>
                                  <div class='contentEditable'>
                                    <p >Instead, you can talk about benefits
                                    </p>
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </table>
                        </td>
                        <td width='51'></td>
                        <td width='166' valign='top'>
                          <table width="166" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                            <tr>
                              <td>
                                <div class='contentEditableContainer contentImageEditable'>
                                  <div class='contentEditable'>
                                    <img src="mailtest/images/featured3.png" alt='featured image' data-default="placeholder" data-max-width="166" width='165' height='165' >
                                  </div>
                                </div>
                              </td>
                            </tr>
                            <tr><td height='22'></td></tr>
                            <tr>
                              <td align='center'>
                                <div class='contentEditableContainer contentTextEditable'>
                                  <div class='contentEditable'>
                                    <h2>Third Feature</h2>
                                  </div>
                                </div>
                              </td>
                            </tr>
                            <tr><td height='22'></td></tr>
                            <tr>
                              <td align='center'>
                                <div class='contentEditableContainer contentTextEditable'>
                                  <div class='contentEditable'>
                                   <p >Or the problems (pain points) your app helps with</p>
                                 </div>
                               </div>
                             </td>
                           </tr>
                         </table>
                       </td>
                     </tr>
                   </table>
                 </td>
               </tr>
               <tr><td colspan='5' height='45'></td></tr>
             </table>
             </td></tr></table>
           </div>
           <div class='movableContent'>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                  <tr>
                    <td>
                      <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                        <tr>
                          <td>
                            <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                              <tr>
                                <td>
                                  <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" >
                                    <tr><td height='10'>&nbsp;</td></tr>
                                    <tr><td style='border-bottom:1px solid #DDDDDD'></td></tr>
                                    <tr><td height='10'>&nbsp;</td></tr>
                                  </table>
                                </td>
                              </tr>
                              <tr><td height='28'>&nbsp;</td></tr>
                              <tr>
                                <td valign='top' align='center'>
                                  <div class="contentEditableContainer contentTextEditable">
                                    <div class="contentEditable" >
                                      <p style='font-weight:bold;font-size:13px;line-height: 30px;'>This email was sent to [email] when you signed up on [CLIENTS.WEBSITE]. Please add us to your contacts to ensure the newsletters land in your inbox.</p>
                                    </div>
                                  </div>
                                </td>
                              </tr>
                              <tr><td height='28'>&nbsp;</td></tr>
                              <tr>
                                <td valign='top' align='center'>
                                  <div class="contentEditableContainer contentTextEditable">
                                    <div class="contentEditable" >
                                      <p style=' font-weight:bold;font-size:13px;line-height: 30px;'>INvitor inc</p>
                                    </div>
                                  </div>
                                  <p style='font-size:13px;line-height: 15px;'>[CLIENTS.ADDRESS]</p>
                                  <div class="contentEditableContainer contentTextEditable">
                                    <div class="contentEditable" >
                                      <a href='[UNSUBSCRIBE]' style='line-height:19px;color:#A8B0B6; font-size:13px;'>Unsubscribe</a>
                                    </div>
                                  </div>
                                </td>
                              </tr>
                              <tr><td height='28'>&nbsp;</td></tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </div>

         </td>
       </tr>
    </table>
  </td>
</tr>


</table>
  </body>
  </html>

但是当我打开iPhone时,它没有向我显示图像。我在PHP中的发布代码是:

<?php
                $email_to = ''; 
                    $email_subject = sec("subject"); 
                    $email_message = "<html><body>".$_POST['message']."</body></html>";
                    $fromaddress  = "From: xxxxx$gmail.com ,'r'n"; 
                    $fromaddress  .="BCC: ".$email_address."'r'n"; 
                    $fromaddress  .= 'Content-Type: text/html';

                    mail($email_to, $email_subject, $email_message, $fromaddress);
?> 

如果我通过gmail连接,我确实会看到你的图片,所以代码有什么问题

我没有尝试你的代码.但似乎很好. 我能看到的唯一问题是 图像路径 .对于邮件模板,图像需要从服务器而不是从文件夹目录加载。

例如:<img src="mailtest/images/bigImg.png" alt='featured image' data-default="placeholder" data-max-width="300" width='326' height='269' > 将是

  ` <img src="http://www.yourdomain.com/mailtest/images/bigImg.png" alt='featured image' data-default="placeholder" data-max-width="300" width='326' height='269' > 

因此,请更改图像路由。希望它的作品。谢谢

出于安全原因,垃圾邮件过滤器可能只阻止邮件中的图像。

我会使用这种方法来解决问题:将图像插入 html 电子邮件中,而无需物理插入它们

图像可以在 HTML 电子邮件中显示,而无需物理插入它们。

这样可以减小电子邮件大小,因为图像不会随电子邮件一起传输。因此,当过滤规则考虑电子邮件的大小时,被困在电子邮件过滤器中的可能性较小。