Search code examples
emailsvgsmtpgmailhtml-email

Image url inside an email template changes and the image does not show properly

I have created the following email template and send email to clients from my website (ASP.NET MVC, C#) using SendGrid. Note that there is an envelope icon at the end of the email. 

<!DOCTYPE html>
<html>
<head></head>
<body>
  <p>Some email content</p>
  <hr/>
  <p>reply info:  </p>
  <p>
    <img src='https://prod-shopless-cdn.s3-ap-southeast-2.amazonaws.com/icons/email-icon.svg' alt='email' height='20' style='vertical-align: middle; padding-right: 5px;'>
    <a rel='nofollow' ymailto='mailto:[email protected]' href='mailto:[email protected]'>[email protected]</a>
  </p>
</body>
</html>

When I send the email to a yahoo address, I see the following is prepended to the image url: https://ecp.yusercontent.com/mail? but the image still shows fine: 

<p> 
    <img src="https://ecp.yusercontent.com/mail?url=https%3A%2F%2Fprod-shopless-cdn.s3-ap-southeast-2.amazonaws.com%2Ficons%2Femail-icon.svg&amp;t=1577343946&amp;ymreqid=eab30077-9a08-b7e9-1c70-820001015100&amp;sig=idgsn8ycGFqhWibk5cnXTQ--~C" alt="email" height="20" style="vertical-align:middle;padding-right:5px;"> 
    <a rel="nofollow" ymailto="mailto:[email protected]" target="_blank" href="mailto:[email protected]">[email protected]</a> 
</p>

When I send the email to a Gmail account, I see the following is prepended to the image url: https://ci5.googleusercontent.com/proxy/fMePoJvSwECei02DF_cx9SKczcRDRDa9XeJs263AGBRUysoCNxeZhErF834cSHBLcBGkDR-JWdfqhZkW878P9A3gM7nh8dRfdNxjVpBrGiNBBJCoRnNmBrkSAoF-TBu3IQ=s0-d-e1-ft# and the image no longer shows.

<p>
  <img src="https://ci5.googleusercontent.com/proxy/fMePoJvSwECei02DF_cx9SKczcRDRDa9XeJs263AGBRUysoCNxeZhErF834cSHBLcBGkDR-JWdfqhZkW878P9A3gM7nh8dRfdNxjVpBrGiNBBJCoRnNmBrkSAoF-TBu3IQ=s0-d-e1-ft#https://prod-shopless-cdn.s3-ap-southeast-2.amazonaws.com/icons/email-icon.svg"
    alt="email" height="20" style="vertical-align:middle;padding-right:5px" class="CToWUd">
  <a rel="nofollow" href="mailto:[email protected]" target="_blank">[email protected]</a>
</p>

How can I resolve this issue?

Solution

  • The change of image URL on both Yahoo and Gmail is because they use their image caching, more info about Gmail Image Proxy

    I found the answer to my problem here, it appears that Google Image Proxy works with standard image types (.jpg, .png and .gif)... my image type was .svg, I changed the template to use .png and it works fine now.