HTML image not showing in Gmail

Question

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

Answer 1

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" />

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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&id=FILEID'>

to form URL please refer here.

Answer 6

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.