HTML image not showing in Gmail

I'm sending an e-mail newsletter in HTML. Inside the HTML I have something like

<img height='70' width='70' style='display:block' src='myDomain.com/imageName.png'>

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.

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:

<img src="https://static.mydomain.com/images/logo.png" alt="Logo" title="Logo" style="display:block" width="200" height="87" />

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

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:

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

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.

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.

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:

<img style="height: 24px; width: 24px; display: block;" src="IMAGE SOURCE"/>

I replaced it with:

<div style="height: 24px; width: 24px; display: block; background: url(IMAGE SOURCE); background-size: contain;"></div>

Hope this helps others who spent way too long pulling their hair out over this.

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

<img src="https://ci7.googleuser....Blah.Blah..https://devserver.com/Folder1/Images/OurImage.PNG">

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.

<img src="https://www.**prodserver**.com/folder1/folder2/myactualimage.jpg">

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

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: '[email protected]',
  to: emails,
  subject: 'i super another ma node mailer cool test',
  text: 'That was easy!',
  html: '<a href="//google.com"><div style="background-image: url(http://fulladdress.com/ca/1/product_assets/T/C/X/M/K/NMTCXMK_mu.jpg);width:500px;height:500px">ascfas</div></a>'
};

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.

I was using Cloudflare. As soon as I disabled the proxy for my host's website IP address images in Gmail appeared immediately.

I have now added a new firewall rule to allow requests where the URI contains 'googleimageproxy' and everything is working fine.

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.

In backend i created endpoint for showing images. Laravel code looks like:

 public function getImage($name)
 {
        return response()->file(base_path() . '/resources/img/' . $name . '.png');
 }

Then in my html email template i created div with background-image.

<div style='background: url("https://mysite1.com/api/v1/get_image/logo")'></div>

And it's works for me.

I tried another image from internet which url starts https:// it worked on gmail and outlook. get your images from domain which has SSL.