Link to home
Start Free TrialLog in
Avatar of sasnaktiv
sasnaktivFlag for United States of America

asked on

Gmail won't show "<img src='data:image/png;base64, etc. etc. " as an image — just the code!

Hi Guys,
This is a strange one. Gmail won't show "<img src='data:image/png;base64, etc. etc. " as an image — just the code!
Sending a group newsletter to anyone@gmail.com results in a message that features the data:image code — not the image.
Gmail functions properly when we send email with data:image using an email client such as Thunderbird, but gmail fails when sending a mass mailing using PHP.
Got any idea of what's going on and how to solve it?
Thanks,
Sas
Avatar of Robert Granlund
Robert Granlund
Flag of United States of America image

Include the entire url
include height and width attributes
make it display:block;
use both alt and title tags

You can also place them in a google drive and reference them from there.
Avatar of sasnaktiv

ASKER

Thanks. I've included the height & with attributes as well as the alt'' but not title tags.
Also I'm unfamiliar with "display:block"
And I'm also confused as to why I'd include the entire url when <img src='data:image/ ... is the image in code which does not rely on a link to the original image. Using  <img src='data:image/ ...  rather than an actual link to an image, avoids the need for dependencies—correct?
Enlighten me.
Sas
Avatar of David Johnson, CD
The following is python not php

fter you install PyPng, you should be able to use the following

import pyqrcode
import io
import base64
c = pyqrcode.create("hello")
s = io.BytesIO()
c.png(s,scale=6)
encoded = base64.b64encode(s.getvalue()).decode("ascii")
If you use IPython Notebook, you can quickly verify if this works for you

from IPython.display import display, HTML
display(HTML('''<img src="data:image/png;base64,''' + encoded + '''">'''))

Open in new window


What this code does is the the following:

creates a base64 encoded variable of the image and then includes this variable in the message.
Thanks, this may work just fine—but we don't use python. And I don't think we can count on everyone on our email list to be using python. We are dealing with more than one email platform and email client — google — webmail — hotmail — Outlook — Thunderbird — etc...
Thanks for the help,
Sas
Display:block would go in the image tag.  style="display:block;"
The comment on a full url came from another form about images not displaying in gmail.  The response, it would seem, came from someone involved with gmail and mass marketing.
Yeah, that makes sense. Thanks for the quick tutorial on "display:block". That should be easy to implement.  I'll give it a try—fingers crossed.
As far as using an absolute URL goes—that's something we always do. So that just tells me that whoever was doing mass mailing was not using a complete URL.
rgranlund,
Is there a level above "Expert" — That's where you belong.
I just did a quick, very sloppy test, simply by adding style='display:block;'. The results made me very happy. Thank you.
Tomorrow I will use it in the more complex email templates we've created, and let you know how it works out.
Thanks again & stay tuned,
Sas
Nope. It ain't working.
Yesterday when I sent out a sample, I did it using Thunderbird, and gmail.com featured the image properly. That got me excited.
This morning I sent one using PHP mail, and all we get is the code for the 'data:image' — very disappointing.
Got any ideas how to solve this problem?
Sas
what are you using to encode the pictures'd data into base64 encoding?
Thunderbird, David.
Thanks for hanging in there.
Sas
I ran into something like this a year or so ago. If I recall correctly, the problem wasn't that Gmail was stripping out the data when it RECEIVED the message, but rather that the web-based email client for Gmail was stripping it out when you were reading the message on the web. If you used a normal email client like Thunderbird to read the message, then it wasn't stripping it out.
Hi Gonzo,
Somehow I don't think we can teach everyone on our email list who uses gMail.com to get their email through Thunderbird. Do you have any suggestions?
Sas
An experiment may be to leave out the http and just have the image address of //myurl.com myimage.jpg .  Just a thought because I am out of ideas.
Oh, I wasn't suggesting that you do that. I was just saying you could confirm that was the problem behavior you were seeing. I don't think I ever found a good solution for everything.

I think I read somewhere that Gmail had just decided to strip out those inline/embedded images as a security step, and there wasn't much you could do about it except use externally-referenced URLs and leave it up to the end user to choose to trust the URLs/download images.
Thanks for the help & attention you two,
Rgranlund I'm not using an image that links to the server as in (<img src=http://clientSite.com/images/myimage.jpg>)
I'm using (<img src='data:image/png;base64,iVBORw0 ... etc>) which does not rely on a link to our server.
Every webmail & and email client we've tested functions properly displaying the 'data:image' as a picture. Except for '@gmail.com' which presents just the code — no image.

Now gr8gonzo, it's too bad you don't have a solution for 'everything.'  If you did you could be King Of The World, and we would all have immortality. But all kidding aside, I do appreciate your help.
Sas
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.