CODEWITHSUNDEEP
emailhtml-emailsendgrid
UXCODA
UXCODA

Reputation: 1226

Why is my image not showing up on older email clients on first load?

I have a HTML email designed in tables to support older email clients. I am using sendgrid so the image value is displayed using an {{#each}}

This works fine on most newer clients and browsers but on Mac Mail and Outlook up to 2016 the main image does not show the first time you view the email. If you view another email in your inbox and go back to that one it magically appears. Also once its cached it will appear every time.

This is how I am displaying the image.

<td class="img-container">
  <a href="linkToSomewhere.html" style="text-decoration: none;">
     {{#if this.hasPhoto}}
       <img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />                       
      {{/if}}
   </a>
</td>

Upvotes: 0

Views: 208

Answers (1)

UXCODA
UXCODA

Reputation: 1226

Im adding this here because I couldnt find any way to solve this by searching. I hope this helps you. To solve this weird bug you need to reserve the space in your HTML for the img. You can do that with a width and height style on the td

 <td class="img-container" style="width: 100%; height: 380px;">
  <a href="linkToSomewhere.html" style="text-decoration: none;">
     {{#if this.hasPhoto}}
       <img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />                       
      {{/if}}
   </a>
</td>

Upvotes: 1

Related Questions