问题
I have created one html template for email. (using PHP and PHPMailer to send the mail)
It's working fine in below sizes.
- Large Screen Display (LG)
- Medium or Normal Screen Display and Laptops (MD)
- Tablets Screens (SM)
- Mobile Devices Screens (XS)
- Working in Outlook as well
But it's not working in Samsung Galaxy Note 5.
In other android devices looks like below image,
In Samsung Galaxy Note 5 looks like below,
Images displayed like attached items in Samsung Galaxy Note 5.
Html Code:
<!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>A Simple Responsive HTML Email</title>
<style type="text/css">
.content {max-width: 900px !important;}
.dynamic_container{width: 31.33% !important;border:1px solid #ccc;margin:1%;}
a{padding: 10px 8px !important;}
@media (min-width:651px) and (max-width: 992px){
.content {max-width: 600px !important;}
.dynamic_container{width: 47% !important;margin:1.5%;}
a{padding: 10px 0 !important;}
}
@media (min-width:0px) and (max-width: 650px){
.content {max-width: 300px !important;}
.dynamic_container{width: 96% !important;border:1px solid #ccc;margin:2%;}
}
</style>
</head>
<body bgcolor="#f6f8f1" style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; min-width: 100% !important;">
<!--[if (gte mso 9)|(IE)]>
<style>
.dynamic_container{width: 32.6% !important;border:1px solid #ccc;}
.button{padding:10px !important;}
</style>
<table width="100%" align="center" border="0">
<tr>
<td>
<![endif]-->
<table class="content" align="center" width="100%">
<tr>
<td class="header" bgcolor="#c7d8a7" style="padding: 40px 30px 20px 30px;">
<table width="100" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="70" style="padding: 0px 20px 20px 0px;">
<img src="assets/images/i4cfinancial_Logo.png" border="0" alt="" style="height: auto;" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="innerpadding borderbottom" style="border-bottom: 1px solid #f2eeed;">
<table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
</tr>
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
</tr>
<tr class="grid">
<td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
</td>
</tr>
<tr>
<td style="padding: 20px 0px 0px 0px;">
<table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
</td>
</tr>
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
</tr>
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
</tr>
<tr class="grid">
<td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
</td>
</tr>
<tr>
<td style="padding: 20px 0px 0px 0px;">
<table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
</td>
</tr>
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
</tr>
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
</tr>
<tr class="grid">
<td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
</td>
</tr>
<tr>
<td style="padding: 20px 0px 0px 0px;">
<table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
</td>
</tr>
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
</tr>
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
</tr>
<tr class="grid">
<td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
</td>
</tr>
<tr>
<td style="padding: 20px 0px 0px 0px;">
<table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
</td>
</tr>
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
</tr>
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
</tr>
<tr class="grid">
<td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
</td>
</tr>
<tr>
<td style="padding: 20px 0px 0px 0px;">
<table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
</td>
</tr>
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
</tr>
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
</tr>
<tr class="grid">
<td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
</td>
</tr>
<tr>
<td style="padding: 20px 0px 0px 0px;">
<table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
</td>
</tr>
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer" bgcolor="#44525f" style="padding: 20px 30px 15px 30px;">
<table width="100%" border="0">
<tr>
<td align="center" class="footercopy" style="font-family: sans-serif; font-size: 14px; color: #ffffff;">© Someone, somewhere 2013<br/><a href="#" class="unsubscribe" style="display: block; margin-top: 20px; padding: 10px 50px; border-radius: 5px; text-decoration: none; font-weight: bold;"><font color="#ffffff">Unsubscribe</font></a>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" width="100%">
<tr>
<td width="50%" align="right" style="padding: 0 10px 0 10px;">
<a href="http://www.facebook.com/">
<img src="assets/images/fb.png" width="37" height="37" alt="Facebook" border="0" />
</a>
</td>
<td width="50%" align="left" style="padding: 0 10px 0 10px;">
<a href="http://www.twitter.com/">
<img src="assets/images/twit.png" width="37" height="37" alt="Twitter" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>Can you please help me (Explain as well) ?
回答1:
The images in an email template might not display for a variety of reasons. The first thing to check is that the email client is enabled to display images. you might refer to your email client below to adjust your settings:
iPhone/iPod/iPad
Gmail
If the settings in your email client are correct and you still can't view images:
Try opening your email in another web browser or unblock images in the browser.
Sometimes the image is just too large or in a format that the email client doesn't support; the most common formats are JPG, PNG and GIF.
Make sure the images are hosted on a public web server. If you need a password to access the image, they won't display in an email.
In addition to it would be better to have a look at the articles below in order to prevent images from showing in an email template:
Set Up Images for Success in an Email
Missing Images in an Email Campaign
Hope this helps...
回答2:
What about converting the images to base64?
You'll result with a slightly increased email size but you'll be able to show the images without showing them as attached ones.
Small guide on how to use base64 in emails: https://stackoverflow.com/a/9110167/9295292
回答3:
I'm not sure about this since i've never encountered something like this when i make emails and i make alot daily. Try changing the source of the img to a location instead and not as an included /assets/... (go for src="http://www.example.com/picture1.jpg" or use a CDN to serve those images).
I recommend emailonacid to test your emails.
回答4:
Try to set width and height attributes for your images. I.e:
<img height="50" width="100" src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" />
回答5:
You can try to add display : inline- block for this to show properly for all image tags
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="display:block" width="100" height="50" />
回答6:
Just replace the code which is given in the screenshot with the following code:
Screenshot
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="39%" valign="top" align="left"></td>
<td width="9%" align="left" valign="top" style="text-align:right;"><img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" /></td>
<td width="4%" align="left" valign="top" style="text-align:center; vertical-align:middle;">/</td>
<td width="9%" align="left" valign="top" style="text-align:left;"><img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /></td>
<td width="39%" valign="top" align="left"></td>
</tr>
</tbody>
</table>
<!--<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />-->
</td>
</tr>
来源：https://stackoverflow.com/questions/49556424/images-not-loading-properly-in-gmail-using-html-template-on-samsung-galaxy-note