大佬教程收集整理的这篇文章主要介绍了使用html模板在gmail中无法正确加载图像(在Samsung Galaxy Note 5上),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
它在以下尺寸下工作正常.
>大屏幕显示器(LG)
>中型或普通屏幕显示器和笔记本电脑(MD)
>平板电脑屏幕(SM)
>移动设备屏幕(XS)
>也在Outlook中工作
但它不适用于三星Galaxy Note 5.
在其他Android设备看起来像下面的图像,
在三星Galaxy Note 5中如下所示,
图像显示为三星Galaxy Note 5中的附件.
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>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>
你能帮帮我吗(解释一下)?
如果电子邮件客户端中的设置正确且您仍无法查看图像:
>尝试在其他网络浏览器中打开您的电子邮件或取消阻止图片
浏览器.
>有时图像太大或电子邮件的格式
客户不支持;最常见的格式是JPG,PNG和GIF.
>确保图像托管在公共Web服务器上.如果你需要一个
用于访问图像的密码,它们不会显示在电子邮件中.
除了最好看看下面的文章,以防止图像显示在电子邮件模板中:
Set Up Images for Success in an Email
Missing Images in an Email Campaign
希望这可以帮助…
以上是大佬教程为你收集整理的使用html模板在gmail中无法正确加载图像(在Samsung Galaxy Note 5上)全部内容,希望文章能够帮你解决使用html模板在gmail中无法正确加载图像(在Samsung Galaxy Note 5上)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。