Geek Answers Handbook

Why doesn't Google Chrome show base64 encoded images?

Firefox, Internet Explorer, Opera accept the following code:

<html> <head> <style type="text/css"> .minus { width: 11px; height: 11px; background-image: url("data:image/gif;base64,R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw"); } </style> </head> <body> <div class="minus"> </body> </html>

Chrome (version 19.0.1084.56) does not. Why?

+7
source share
4 answers

This is a bug in Chrome, see bug # 105725 . The base64 string should be padded. The following solution works fine: http://jsfiddle.net/TunfH/ (I added == at the end).

 <html> <head> <style type="text/css"> .minus { width: 11px; height: 11px; background-image: url("data:image/gif;base64,R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw=="); } </style> </head> <body> <div class="minus"></div> </body> </html>
+2
source

Your base64 data is invalid, I suppose you meant

 data:image/gif;base64,R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw==

Which seems to work fine in Chrome and Firefox [I have access to]

I assume Chrome has a slightly more rigorous base64 implementation and requires debugging.

0
source

I added...; charset = utf-8; base64, .... to one of my files, and it did the trick for me, just thought that I would share what happened to me with chrome, I knew that I added the image file to my code, but it didn’t show on my client computer, found out that this is a problem with chrome, and adding charset solved my problems.

0
source

Your problem is that you have a "//" that you need to "run away" to avoid the err_invalid_url warning you see on the console

So take:

 R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw

And convert it to

 R0lGODlhCwALAIABAAAAAP/%0a/%0a/yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw

And it will display correctly

The same solution should be used if the image starts with "/", replace it with "% 0a /"

0
source

More articles:


All Articles