Why does Google Chrome not show base64 encoded images?
This is a bug in Chrome, see bug #105725. The base64-string has to be padded. The following solution works fine: http://jsfiddle.net/TunfH/ (I have 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>
Your base64 data is invalid, I believe you meant
data:image/gif;base64,R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw==Which seems to work just fine in Chrome and Firefox [ what I have access to ]
I am guessing that Chrome has a slightly more strict base64 implementation and requires the padding.
Your problem is that you have "//" which you need to "escape" in order to avoid the err_invalid_url warning you see in the console
So take your:
R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOwAnd convert it to
R0lGODlhCwALAIABAAAAAP/%0a/%0a/yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOwAnd the it will show properly
The same solution should be used if the image starts with a "/" replace it with "%0a/"