Base64 Image not showing up in IE6

StackOverflow https://stackoverflow.com/questions/14889940

سؤال

I am trying to render an image in IE6 from a base64 encoded string. As per the resources here and here, I am trying out this following code (the image is just the base64 encoding of my profile pic here... :), obtained from this site)

<!--
Content-Type: multipart/related; boundary="=_data-uri"
-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pic {
width:670px;height:710px;
background-image: expression("url(mhtml:" + window.location + "!locoloco)");
}
</style>
<script type = 'text/javascript'>
window.onload = function() { alert(window.location); }
</script>
</head>
<body> 
<div>Foo</div>
<div id="pic" ></div>
<div id=test style="display: none;">

--=_data-uri
Content-Location:locoloco
Content-Transfer-Encoding:base64

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
--=_data-uri--

</div>
</body>
</html>

But when I run the page in IE6, the image doesn't show up. Can anybody tell me what am I doing wrong, and how to fix it so that it shows up fine in IE6? I am saving the file in my desktop and trying to open that in IE6...

Update:

As per Musa's comment below, I changed the code to include the hack in the CSS only. Still not working:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*
Content-Type: multipart/related; boundary="=_data-uri"

--_
Content-Location:locoloco
Content-Type: image/png
Content-Transfer-Encoding:base64

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

--=_data-uri--
*/
#pic {
width:670px;height:710px; *background: expression("url(mhtml:" + window.location + "!locoloco)");

}
</style>
<script type = 'text/javascript'>
window.onload = function() { alert(window.location); }
</script>
</head>
<body> 
<p>Foo</p>
    <div id="pic" ></div>
</body>
</html>
هل كانت مفيدة؟

المحلول

You have wrong resources separator in your code:

Content-Type: multipart/related; boundary="=_data-uri"

Here =_data-uri is a delimiter you have to use to separate images from each other.

E. g.:

/*
Content-Type: multipart/related; boundary="_"

--_
Content-Location:locoloco
Content-Type: image/png
Content-Transfer-Encoding:base64

iV... // image here
--_
Content-Location:locoloco2
Content-Type: image/png
Content-Transfer-Encoding:base64

iV... // image here
*/

You don't need separator at the end of the last image.

In your code you have declared separator =_data-uri, use separator _ before first image and used =_data-uri-- after it.

To make it work, change first one to the declared one and remove the one in the end.

This code worked for me (also wrote fixed url in mhtml, be sure to change it to the right one for you):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*
Content-Type: multipart/related; boundary="_"

--_
Content-Location:locoloco
Content-Type: image/png
Content-Transfer-Encoding:base64

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

#pic {
    width:670px;
    height:710px;
    *background: expression("url(mhtml:http://localhost/~iadramelk/tmp/base64.html!locoloco)");

}
</style>
</head>
<body> 
<p>Foo</p>
<div id="pic" ></div>
</body>
</html>

نصائح أخرى

base64 images are showing up in IE6 and IE7... in the last i found a simple solution when you are using a encoded images in css.

"write two different property in a same class"

I am going to explain it below.

<div class="myClass">    </div>
<style>
    .myClass {
            /*this will work for other browsers*/
            background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAySURBVHjaYlSdd/4/AwQwQml0PgMTHsn/yIoYCCmEKcKrEFkRTrcxEVIAs46g7wACDACraA+g90OOjwAAAABJRU5ErkJggg%3D%3D');        
            /* For ie6 and ie7*/
            *background:url('give real path_to_image');
    }
</style>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top