不显示来自 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'> </td></tr>
                <tr><td style='border-bottom:1px solid #DDDDDD'></td></tr>
                <tr><td height='10'> </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'> </td></tr>
                <tr><td style='border-bottom:1px solid #DDDDDD'></td></tr>
                <tr><td height='10'> </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'> </td></tr>
                                    <tr><td style='border-bottom:1px solid #DDDDDD'></td></tr>
                                    <tr><td height='10'> </td></tr>
                                  </table>
                                </td>
                              </tr>

                              <tr><td height='28'> </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'> </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'> </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 连接,我会看到你的图片,所以代码有什么问题

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

我会用这种方法来解决问题: Insert images into html email without physically inserting them

Images can be displayed within HTML email without physically inserting them.

This keeps email size down because the images do not travel with the email. Thus, there is less chance of getting trapped in email filters when filtering rules consider the size of the email.

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

例如:<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' > 

所以,改变你的形象路线。希望它的作品。 谢谢