Не отображает изображения в электронной почте в формате HTML с 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, я вижу ваши фотографии, так что не так с кодом
Решение
Я не пробовал твой код. Но, кажется, это хорошо. Единственная проблема, которую я вижу, это путь к изображению.
Для почтового шаблона изображение нужно загружать с сервера, а не из папки.
Например : <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 без их физической вставки.
Это уменьшает размер электронной почты, поскольку изображения не отправляются вместе с электронной почтой. Таким образом, существует меньше шансов попасть в фильтры электронной почты, когда правила фильтрации учитывают размер электронной почты.