Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Images not loading properly in gmail using html template (on Samsung Galaxy Note 5)

Tags:

html

email

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,

enter image description here

In Samsung Galaxy Note 5 looks like below,

enter image description here

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;">&copy; 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) ?

like image 690
Sarvan Kumar Avatar asked Mar 29 '18 12:03

Sarvan Kumar

People also ask

Why is my HTML image not showing in Gmail?

Always show imagesOn your computer, go to Gmail. See all settings. Scroll down to the "Images" section. Click Always display external images.

Why are images not showing in HTML email?

In some cases, senders may be able to know whether an individual has opened a message with unique image links. As always, Gmail scans every message for suspicious content and if Gmail considers a sender or message potentially suspicious, images won't be displayed and you'll be asked whether you want to see the images.

Why are my Gmail images not loading?

Always show images If images don't load in Gmail, check your settings. On your Android phone or tablet, open the Gmail app . your account. Under "Data usage," tap Images.

How do I fix templates in Gmail?

In Gmail, select the "Templates" menu at the top of your inbox, find and click the Template you'd like to update, and then click the "Edit" button at the bottom of the window. Make necessary changes and hit "Save Template." To delete a no longer needed Template, click "More," and then "Delete Template."

2 Answers

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...

like image 127
Murat Yıldız Avatar answered Oct 24 '22 21:10

Murat Yıldız

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

like image 22
riccardogiorato Avatar answered Oct 24 '22 20:10

riccardogiorato
Sign in to Comment

Related questions

Conditional rendering of HTML elements in React?
Is there a way to get WebGL to render offscreen, without the webgl canvas attached to the DOM?
How to get the sucess message in the same page after submitting the contact form?
Bootstrap 4 - container with 100% height of section
Communicate with html/javascript using QWebEngineView
Global variables in MkDocs
IOS10 fullscreen safari Javascript
How do you stretch and center item using Flexbox?
Get value from "Bootstrap-Select"
How to style an anchor as a button in Bootstrap 4?
Prevent the text going out of the container if it's over 90% width
pseudo-element acting like a grid item in CSS grid
JavaScript change html <p> tag value
ReactJS OnKeyPress to trigger a button press
How to set max height to a CSS grid
Disposition of HTML-Select having UTF-Icons
hint in Netbeans about setting project default for my Web App messed all my HTML files up
'Position: sticky' not sticking
Horizontal and vertical Scroll-able table in Bootstrap
Open terminal from html using href ssh:// url with command line options

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!