HTML image not showing in Gmail

Question

I m sending an e-mail newsletter in HTML   Inside the HTML I have something like   lt img height  70  width  70  style  display block  src  myDomain com imageName png  gt   When I open the newsletter with Thunderbird or Outlook  the image is being displayed  However  when I open it with Gmail  no image is shown  I m not sure if it s about the proxy that Gmail uses for security reasons or if it s something else  Either way  I d like to know if anyone ever came across this and if so  how it was solved

User · Answer

My issue was similar  This is what my experience has been on testing the IMG tag on gmail  assuming most of the organization s would have a dev qa and prod server    I had to send emails to customers on their personal email id s and we could see that gmail would add something of its own like following to src attribute of img tag  Now when we were sending these images from our dev environment they would never render on gmail and we were always curious why   https   ci7 googleusercontent com proxy AEF54znasdUhUYhuHuHuhHkHfT7u2w5zsOnWJ7k1MwrKe8pP69hY9W9eo8 n6-tW0KdSIaG4qaBEbcXue74nbVBysdfqweAsNNmmmJyTB-JQzcgn1j s0-d-e2-ft https   www prodserver com Folder1 Images OurImage PNG   so an image sent to my gmail id as following never worked for me    lt img src  https   ci7 googleuser    Blah Blah  https   devserver com Folder1 Images OurImage PNG  gt    and our dev server we can t render this image by hitting following URL on Chrome or any browser    https   www devserver com folder1 folder2 myactualimage jpg   now as long as the src has www on it worked all the time and we didnt had to add any other attributes    lt img src  https   www   prodserver   com folder1 folder2 myactualimage jpg  gt

User · Answer

Late to the party but here goes    I have experienced this problem as well and it was solved with the following    Including the scheme in the src url  using      does not work - use full scheme EG   https      Including width and height attributes Including style  display block  attribute Including both alt and title attributes   EG     lt img src  https   static mydomain com images logo png  alt  Logo  title  Logo  style  display block  width  200  height  87    gt

User · Answer

Try to add title and alt properties to your image     Gmail and some others blocks images without some attributes   and it is also a logic to include your email to be read as spam

User · Answer

You might have them turned off in your gmail settings  heres the link to change them https   support google com mail answer 145919 hl en Also gmail may be blocking the images thinking they are suspicious  from the link above   How Gmail makes images safe Some senders try to use externally linked images in harmful ways  but Gmail takes action to ensure that images are loaded safely  Gmail serves all images through Google   s image proxy servers and transcodes them before delivery to protect you in the following ways  Senders can   t use image loading to get information like your IP address or location  Senders can   t set or read cookies in your browser  Gmail checks your images for known viruses or malware  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

User · Answer

For me  the problem was using svg images  I switched them to png and it worked

User · Answer

I noticed that Google was stripping the src attribute from my img tags  I tried every answer on this page - with no luck    What finally worked for me was replacing img tags with divs that have background images  For example  instead of    x000D   x000D   lt img style  height  24px  width  24px  display  block   src  IMAGE SOURCE   gt  x000D   x000D   x000D    I replaced it with    x000D   x000D   lt div style  height  24px  width  24px  display  block  background  url IMAGE SOURCE   background-size  contain   gt  lt  div gt  x000D   x000D   x000D    Hope this helps others who spent way too long pulling their hair out over this

User · Answer

I am even later to this party  but after spending about 2 hours trying everything imaginable and not having any luck  I finally realized it will work if I upload the pics to GOOGLE PHOTOS instead of GOOGLE DRIVE   Then I can right-click on the pic  copy the address  paste it in  and it works beautifully

User · Answer

HTTP or HTTPS should be full address   background-image  url http   fulladdress com ca 1 product assets T C X M K NMTCXMK mu jpg   var mailOptions       from   fulladdress gmail com     to  emails    subject   i super another ma node mailer cool test     text   That was easy      html    lt a href    google com  gt  lt div style  background-image  url http   fulladdress com ca 1 product assets T C X M K NMTCXMK mu jpg  width 500px height 500px  gt ascfas lt  div gt  lt  a gt

User · Answer

Google only allows images which are coming from trusted source    So I solved this issue by hosting my images in google drive and using its url as source for my images   Example   with   http   drive google com uc export view amp id FILEID    to form URL please refer here

User · Answer

Please also check your encoding  Google encodes spaces as   instead of  20  This may result in an invalid image link

User · Answer

In addition to what was said by Howard  You have to keep in mind that Google encodes spaces as   To avoid this  the ulr must be encoded in RFC 3986  which means spaces encoded at  20  for example      https   example com My Folder image 1 jpg    to    https   example com My 20Folder image 201 jpg

User · Answer

I know Gmail already fix all the problem above  the alt and stuff now   And this is unrelated to the question but probably someone experiences the same as me   So my web designer use  image  tag instead of  img   but the symptom was the same  It works on outlook but not Gmail  It takes me an hour to realize  Sigh  such a waste of time   So make sure the tag is  img  not  image  as well

[html] HTML image not showing in Gmail

Examples related to html

Examples related to gmail