图片不会显示在HTML电子邮件中?

时间:2015-10-10 15:53:48

标签: html email html-email

我正在尝试制作简单的HTML电子邮件。我希望能够将此电子邮件发送给客户。代码如下:

<!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" />
<title>Newsletter</title>
</head>

<body bgcolor="#8d8e90">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#8d8e90">
    <tr>
        <td>
            <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center">
                <tr>
                    <td>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="376">
                                    <a href="http://www.lux-real-estate.com"><img src="http://phpmail.byethost18.com/emails/Orange_edit/images/logo.jpg" width="150" height="109" /></a>
                                </td>
                                <td width="441">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="46" align="right" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td align="right">
                                                        <font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#68696a; font-size:8px"><a href= "http://phpmail.byethost18.com/emails/Orange_edit/newsletterEdit.html?ckattempt=1" style="color: #0000FF; text-decoration: none; text-transform: uppercase"><strong>VOUS N'ARRIVEZ PAS À OUVRIR CE MAIL? VOIR COMME PAGE WEB</strong></a></font>
                                                    </td>
                                                    <td width="4%">&nbsp;

                                                    </td>
                                                </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td height="30">
                                    <img src="http://phpmail.byethost18.com/emails/Orange_edit/images/PROMO-GREEN2_01_04.jpg" width="393" height="30" border="0" alt=""/>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="center">
            <p><font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#68696a; font-size:36px; text-transform:uppercase"><strong>Agence numÉro 1 des franÇais À  MARBELLA</strong></font></p>
            <p><strong>Spécialiste des faillites bancaires depuis 15 ans (plus de 1000 ventes)</strong>
            <br />
            <font color="#0000FF" style="text-decoration: none;"><a href="http://www.lux-real-estate.com">www.lux-real-estate.com</a></p>
        </td>
    </tr>
    <tr>
                  <td align="center">&nbsp;</td>
                </tr>
                <tr>
                  <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td width="7%">&nbsp;</td>
                        <td width="58%" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td>&nbsp;</td>
                          </tr>
                          <tr>
                            <td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td width="95%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td>
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td height="10" style="border-bottom:4px solid #d0d1d3"></td>
                                                </tr>
                                                <tr>
                                                    <td height="10"></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="35" align="center" valign="middle">
                                            <font style="font-family: Georgia, 'Times New Roman', Times, serif; color: #F58220; font-size: 25px"><strong><em><u>Reprise Économique en Espagne</u></em></strong></font>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" valign="top">
                                            <ul><font style="font-family: Verdana, Geneva, sans-serif; color: #0000FF; font-size: 13px; line-height: 21px">
                                                <li>Taux de croissance pour 2015, <strong>+3,2%</strong>, plus élevé en Europe</li>
                                                <li>Hausse du marché immobilier: <strong>+4,2%</strong> en 2015</li>
                                                <li>Prévisions 2016: <strong>+12%</strong></li>
                                            </font></ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td height="10" style="border-bottom:4px solid #d0d1d3"></td>
                                                </tr>
                                                <tr>
                                                    <td height="10"></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                           <!-- TO FORMAT -->
                                            <td align="center" valign="top">
                                                <font style="font-family: Georgia, 'Times New Roman', Times, serif; color:#f58220; font-size:20px"><strong><em><u>Remontée des Prix à Marbella</u></em></strong></font> 
                                                <br />
                                                <font style="font-family: Verdana, Geneva, sans-serif; color: #0000FF; font-size: 13px; line-height: 21px">Derniers appartements disponibles faillite bancaire -50%. Voir graphique ci-dessous!</font></td>
                                        </tr>
                                    </table>
                                </td>
                              </tr>
                              <tr>
                                <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td height="10" style="border-bottom:4px solid #d0d1d3"></td>
                                  </tr>
                                  <tr>
                                    <td height="10"></td>
                                  </tr>
                                </table></td>
                              </tr>
                              <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td><p><font style="font-family: Georgia, 'Times New Roman', Times, serif; color: #f58220; font-size: 20px; text-align: center;"><strong><em><u><center>Pourquoi Sud de L'Espagne?</center></u></em></strong></font></p>
                                                <ul><font style="font-family: Verdana, Geneva, sans-serif; color: #0000FF; font-size: 13px; line-height: 21px">
                                                    <li>320 jours de soleil par an</li>
                                                    <li>Faible coût de la vie</li>
                                                    <li>Hospitalité andalouse légendaire</li>
                                                    <li>Système de santé comme en France (Sécurité Sociale Internationale)</li>
                                                    <li>Pas de problème de sécurité</li>
                                                    <li>Qualité de l'air</li>
                                                    <li>Tradition, art et culture unique</li>
                                                </font></ul>
                                            </td>
                                        </tr>
                                    </table>
                                </td>                          
                              </tr>
                              <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="10" style="border-bottom:4px solid #d0d1d3"></td>
                                        </tr>
                                        <tr>
                                            <td height="10"></td>
                                        </tr>
                                    </table>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td>
                                                <center><font style="font-family: Georgia, 'Times New Roman', Times, serif; color: #FF6600; font-size: 20px"><strong><em><u>Investissement Attractif</u></em></strong></font></center>
                                                <ul><font style="font-family: Verdana, Geneva, sans-serif; color: #0000FF; font-size: 13px; line-height: 21px">
                                                    <li>Prix de l'immobillier au plus bas (-50%)</li>
                                                    <li>Destination touristique importante, animée toute l'année</li>
                                                    <li>Golf (plus de 50)</li>
                                                    <li>Mer (sports nautiques)</li>
                                                    <li>Gastronomie réputée</li>
                                                    <li>Investissement RENTABLE et SECURISE</li>
                                                    <li>L'an dernier, les francais ont été les seconds invetisseurs étrangers</li>
                                                </font></ul>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="10" style="border-bottom:4px solid #d0d1d3"></td>
                                        </tr>
                                        <tr>
                                            <td height="10"></td>
                                        </tr>
                                    </table>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td><center>
                                              <img src="http://phpmail.byethost18.com/emails/Orange_edit/images/curve.png" width="605" height="239" />
                                                </center>
                                                <ul>
                                                <font style="font-family: Verdana, Geneva, sans-serif; color: #0000FF; font-size: 13px; line-height: 21px">                                             </font></ul>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                              </tr>
                        </table></td>
                        <td width="5%" style="border-right:2px dashed #95989a">&nbsp;</td>
                      </tr>
                    </table></td>
                  </tr>
                </table></td>
                <td width="35%" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="82%" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td height="10"> </td>
                      </tr>
                      <tr>
                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td align="center" valign="middle"><img src="http://phpmail.byethost18.com/emails/Orange_edit/images/marbellaMap.png" width="200" height="189" /></td>
                          </tr>
                          <tr>
                            <td align="center" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td width="12%">&nbsp;</td>
                                <td width="79%" bgcolor="#f58220"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td width="5%"></td>
                                    <td width="90%" height="10"></td>
                                    <td width="5%"></td>
                                  </tr>
                                  <tr>
                                    <td>&nbsp;</td>
                                    <td align="center"><font style="font-family: Georgia, 'Times New Roman', Times, serif; color:#ffffff; font-size:16px"><strong>Comment nous contacter</strong></font></td>
                                    <td>&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td></td>
                                    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                      <tr>
                                        <td height="5" style="border-bottom:1px solid #ffffff"></td>
                                      </tr>
                                      <tr>
                                        <td height="5"></td>
                                      </tr>
                                    </table></td>
                                    <td></td>
                                  </tr>
                                  <tr>
                                    <td>&nbsp;</td>
                                    <td align="left" valign="top">
                                    <font style="font-family: Georgia, 'Times New Roman', Times, serif; color:#ffffff; font-size:14px; line-height:21px">
                                    Répondre directement a ce mail ou a <em>rperezcanosa@gmail.com</em> en laissant vos coordonnées pour rappel.
                                    <br />
                                    <br /> 
                                    <strong>France:</strong>
                                    <br />
                                    01 85 09 37 96 
                                    <br />
                                    <em>(demander Damien)</em>
                                    <br />
                                    <br />
                                    <strong>Espagne:</strong> 
                                    <br />
                                    0034 663 616 091 <em>(demander Richard)</em>
                                    <font style="font-family:Verdana, Geneva, sans-serif; color:#ffffff; font-size:12px; line-height:20px"><a href= "http://yourlink" style="color:#ffffff; text-decoration:none"><strong><em> </em></strong></a></font></font>
                                    </td>
                                    <td>&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td>&nbsp;</td>
                                    <td align="center">&nbsp;</td>
                                    <td>&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                  </tr>
                                </table></td>
                                <td width="9%" >&nbsp;</td>
                              </tr>
                            </table></td>
                          </tr>
                          <tr>
                            <td align="center" valign="middle">
                                <p>&nbsp;</p>
                                <p>&nbsp;</p>
                                <p><font style="font-family: Georgia, 'Times New Roman', Times, serif; color: #0000FF; font-size: 24px"><em><strong>Billets d'avion offerts (max. 500€) pour tout achat avant le 31/12</strong></em></font></p>
                            </td>
                          </tr>
                        </table></td>
                      </tr>
                    </table></td>
                    <td width="8%">&nbsp;</td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td><img src="http://phpmail.byethost18.com/emails/Orange_edit/images/PROMO-GREEN2_07.jpg" width="598" height="7" style="display:block" border="0" alt=""/></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
            <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center">
                            <font style="font-family:'Myriad Pro', Helvetica, Arial, sans-serif; color:#010203; font-size:9px; text-transform:uppercase"><a href= "http://www.lux-real-estate.com" style="color: #0000FF; text-decoration: none"><strong>Visite notre site de web</strong></a></font>
                        <td width="4%" align="right">
                            <a href="https://www.facebook.com/richrealestatespain?fref=ts" target="_blank"><img src="http://phpmail.byethost18.com/emails/Orange_edit/images/PROMO-GREEN2_09_01.jpg" alt="facebook" width="21" height="19" border="0" /></a>
                        </td>
                        <td align="center">&nbsp;

                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>&nbsp;

            </td>
        </tr>
      </table>
      </td>
  </tr>
</table>
</body>
</html>

发送此代码时,除图像外,所有内容均正确显示。以下是我尝试过的事情:

  • 将相对图片链接更改为绝对链接
  • 付费服务器上的托管图片
  • 尝试查看具有相同结果的多个客户端(Gmail网络,thunderbird,iOS)
  • 用Google搜索,无法找到任何其他解决方案

如果我转到图片的链接,例如http://www.phpmail.byethost18.com/emails/Orange_edit/images/curve.png,那么它显示正常。只是图像不会在电子邮件中显示出来。

我有什么遗漏,还是有办法让图片显示?

2 个答案:

答案 0 :(得分:2)

默认情况下,许多(如果不是大多数)MUA会阻止图像,这些图像不包含在邮件本身中(参见Using Content-ID and cid for embedded email images in Thunderbird),以防止跟踪(例如,跟踪具有唯一ID的像素或图像) )。

答案 1 :(得分:0)

您托管图片的位置/方式必定存在某种问题。正如你所说,我测试过并看到没有图像显示。然后我用一个我从互联网上抓取的图像替换了你的一个图像,现在该图像显示了。

请在此处查看:https://www.emailonacid.com/app/acidtest/display/summary/3RuuhEFAYADIpPVwaWNjzUPMgmaTpu2YH6MlTZdL8gRZC/shared

代码不是问题,而是图像托管。