11

Firefox, Internet Explorer, Opera accept 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?

Jens Haberer
  • 111
  • 1
  • 1
  • 3

4 Answers4

7

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>
Rob W
  • 341,306
  • 83
  • 791
  • 678
MMK
  • 3,673
  • 1
  • 22
  • 30
4

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.

Dre
  • 4,298
  • 30
  • 39
3

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

And convert it to

R0lGODlhCwALAIABAAAAAP/%0a/%0a/yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw

And the it will show properly

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

Noam Rathaus
  • 5,405
  • 2
  • 28
  • 37
  • Hi, your answer is confusing because the encoding above has three forward-slash characters, i.e. '/', but it looks like you have only replaced two of the slashes with '%0a/'. Am I missing something? Also what character does '%0a' encode to? Isn't that a line-feed? Why does a line-feed escape a forward slash? If that is something specific to URL encodings perhaps you could mention a reference. Thanks. – Daniel Bradley Nov 16 '18 at 23:09
  • 1
    @DanielBradley this post is old, the Chrome version mentioned is old as well.. only two %0a were needed back then, they prevented the "//" detection from occurring which Chrome thought was resource being referenced (URI) – Noam Rathaus Nov 18 '18 at 07:35
-1

I added the ...;charset=utf-8;base64, .... to one of my files and that did the trick for me, just thought I would share what happened to work for me with chrome, I knew I added the image file to my code but it wasn't showing on my client's computer, found out it was a chrome issue and adding the charset solved my issues.

Jacob Haas
  • 1
  • 2