HTML image not showing in Gmail

Question

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.

What's the actual `` tag that Gmail displays (open your browser inspector in Gmail)? What URL does it use? — SLaks, Jan 29 '14 at 17:14
It uses the expected url: theProxyUrl#myURL. The problem was not the gmail proxy itself but the image was not accessible. Thunderbird and Outlook worked great because they don't use an intermediate server to access the image. Problem solved. Thank you anyway! — Rita, Jan 30 '14 at 09:04

score 73 · Answer 1 · answered Aug 04 '15 at 21:52

73

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

answered Aug 04 '15 at 21:52

Howard

1,389
11
11

2

width & height did it for me – ion Jul 06 '16 at 10:21
2

I was referencing an AWS S3 URL which had "//" at the beginning of the URL. Replacing with "https://" fixed it. – MattM Feb 11 '17 at 23:51
22

i am use https://, alt, title, width,height and style="display:block" but not showing in my html images in email...please help me. – user3076732 May 31 '17 at 13:17
1

@user3076732 did you figure this out? – Taylor Austin Jul 30 '18 at 18:33
1

It wasn't working for me with just an `alt` attribute, but adding the `title` attribute worked! – Cocowalla Mar 07 '19 at 12:57
I have added alt, title, height, width, display: block still nothing worked. – mimi May 30 '19 at 07:21
10

Also note that if your image is an SVG it won't work either (even with all the above suggestions) and you'll need to convert it to a PNG or other supported format. See: https://stackoverflow.com/a/33151666/1852005 – stwr667 Dec 18 '19 at 02:47

score 52 · Answer 2 · answered Dec 28 '18 at 21:12

52

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

answered Dec 28 '18 at 21:12

Ruben Miquelino

977
9
13

Tried but not worked to me. – emilie zawadzki Apr 20 '22 at 15:15

score 45 · Answer 3 · edited Jan 29 '15 at 09:46

45

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.

edited Jan 29 '15 at 09:46

Chandru

1,306
13
21

answered Jan 29 '15 at 09:07

Sachin Gade

495
4
4

Short answer but really helpful. – Brave Dec 29 '15 at 21:05
Why is that @samuelkobe – Niklas Oct 17 '17 at 12:43
@samuelkobe as of mid 2018 it seems we can still do that – PhoenixB Jun 06 '18 at 19:31
@PhoenixB I believe I may have been misinformed. I am not sure what I read 2 years ago. My bad everyone. Deleted my old comment. – samuelkobe Jun 07 '18 at 20:29
Thanks bro, this helped me – Desper Apr 10 '19 at 16:13
Are the "trusted sources" listed anywhere? Wondering what my other options are for hosting static content besides Google Drive. Tried Amazon S3 didn't work. – Sunny Patel Feb 23 '21 at 20:56
In my case I was using ngrok's autogenerated URL. Once I switched to an ngrok _domain_ (paid plan), Google trusted the images and started downloading them – gkv Oct 12 '22 at 20:39
This is real answer. Gmail only allow to show trusted image url. – new2cpp Dec 14 '22 at 23:21

score 11 · Answer 4 · edited May 31 '15 at 23:17

11

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

edited May 31 '15 at 23:17

Bowdzone

3,827
11
39
52

answered May 31 '15 at 22:02

pHOW

111
1
3

My images with no spaces display fine in Gmail and Yahoo mail. My images with spaces do not display in Gmail nor Yahoo mail. So I believe either this is the issue or both clients just don't like spaces in the image names for some other reason. – MrBoJangles Nov 10 '16 at 00:16
Yep, on the path to our images we had a space. Using an _ instead fixed the issue for us. – rafaelbiten Oct 23 '17 at 19:16

score 9 · Answer 5 · edited Jun 20 '20 at 09:12

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.

thanks but when I first came across it that's what I thout. It's not it: "Images from this sender are always displayed" — Rita, Jan 29 '14 at 17:19
@Rita gmail may still block images if they believe them to be suspicious, try hosting the image on a well known img site like imgur.com and then test it. — codeaddict, Jan 29 '14 at 17:21

score 8 · Answer 6 · answered Jan 29 '14 at 17:16

8

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.

answered Jan 29 '14 at 17:16

Hugo S. Mendes

1,076
11
23

score 7 · Answer 7 · answered Feb 25 '20 at 23:39

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.

In my case, this is the solution that worked. – Roddy P. Carbonell Dec 01 '21 at 09:22 — Roddy P. Carbonell, Dec 01 '21 at 09:22

score 6 · Answer 8 · answered Jul 07 '22 at 10:21

6

I had the same issue and for me it was because I was using an SVG image, once I changed to a JPG or PNG, it worked. Maybe this can assist someone who will come across the same issue. It seems Gmail doesn't support SVG images.

answered Jul 07 '22 at 10:21

BLESSING

407
1
7
17

1

well you are right.... Google does not support SVG. which is kinda stupid if you ask me. – Cees Mar 15 '23 at 02:02

score 4 · Answer 9 · answered Jan 16 '20 at 04:11

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

score 2 · Answer 10 · answered Apr 10 '18 at 13:23

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: '<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>'
};

score 2 · Answer 11 · answered Apr 30 '19 at 10:29

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.

answered Apr 30 '19 at 10:29

Esgi Dendyanri

497
1
8
11

1

Indeed, never forget to look for the obvious (I had switched my LOGO_URL and SITE_URL). – William T. Mallard May 30 '19 at 16:59

Sandeep · Answer 12 · 2019-07-25T19:26:17.250

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

Hi @Sandeep. I am currently having the same issue. If you can't hit the image after adding www. How did you manage to make use of the url to be able to display the image in the email? — BLESSING, Jul 04 '22 at 10:30

score 1 · Answer 13 · edited Jan 21 '22 at 06:17

1

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.

edited Jan 21 '22 at 06:17

Cray

2,774
7
22
32

answered Jan 17 '22 at 07:37

Nick Amis

19
2

score 0 · Answer 14 · answered Jul 18 '19 at 18:38

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.

score 0 · Answer 15 · answered Jul 28 '21 at 09:08

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.

score 0 · Answer 16 · answered Jan 21 '22 at 09:58

0

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

answered Jan 21 '22 at 09:58

uğur sinan sağıroğlu

69
6

score 0 · Answer 17 · edited Mar 22 '23 at 08:48

0

For me, the problem was using images name as equity investments.png .
I switched them to equity_investments.png and it worked.

Not working :-

<img src="https://xxxxxxx.com/webinar_images/equity investments.png" alt="" />

Working :-

<img src="https://xxxxxx.com/webinar_images/equity_investments.png" alt="" />

edited Mar 22 '23 at 08:48

Eddy

3,623
37
44

answered Nov 15 '22 at 11:14

Kumar

73
5

score 0 · Answer 18 · answered Feb 01 '23 at 15:42

I tried all the suggestions this thread (setting width, height, title, full url, etc). The final fix for me was switching from SVG to PNG did the trick for me.

I then tried removing all the other extra decorators (title, display block), and it still worked as long as I left the image type as PNG. So, PNG seems to be the only required change.

score 0 · Answer 19 · answered Feb 28 '23 at 16:50

0

I tried to switch from .svg to .png and it worked!. Tried to add all properties to the svg image and gmail didn't show the image.

answered Feb 28 '23 at 16:50

Jorge Andres Wolf

1

1

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/33941060) – Maizied Hasan Majumder Mar 06 '23 at 10:04

score 0 · Answer 20 · answered Jun 05 '23 at 10:31

0

In my case I was missing the https:// in the path and had only the domain name. Added that and it started showing properly

answered Jun 05 '23 at 10:31

Rod911

752
5
14

HTML image not showing in Gmail

20 Answers20

Linked

Related