Question

I had tried all possible way to display image using base64 string. But none of them are working. I tested it on IE6,7, Firefox 3. Please tell me what is wrong with below code.

<head>

<STYLE type="text/css">
div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
 </STYLE>
</head>
<body>
<img src="data:image/jpg;base64,968" />
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
<script type="text/javascript"  src="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>
<div class="image"></div>
</body>
Was it helpful?

Solution

I tested it on IE6,7, Firefox 3

It just happens that none of these support data URIs (well, Firefox 3 does I think, just not very well). So you're doing nothing wrong.

If you need your background image to display in these browsers, just use traditional image files and url() instead.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top