CODEWITHSUNDEEP
htmlinternet-explorerimageconditional-statementsbase64
Jacob
Jacob

Reputation: 161

IE6: How to get inline base64 images to work with IE6?

How do I get IE6 to display inline base64 encoded images?

<img src="data:image/png;base64,....." />

This works in Firefox/Chrome/Safari but not IE6.

Upvotes: 16

Views: 21775

Answers (8)

Makarand Mane
Makarand Mane

Reputation: 503

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 attributes in a same class. Use css browser specific hacks"

I am going to explain it below.

   <div class="myClass">    </div>
    <style>
            .myClass{
                    background=url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAySURBVHjaYlSdd/4/AwQwQml0PgMTHsn/yIoYCCmEKcKrEFkRTrcxEVIAs46g7wACDACraA+g90OOjwAAAABJRU5ErkJggg%3D%3D'); 
    /* Above property will work for all browsers*/

                    *background=url('give real path_to_image'); 
/* This will work only for ie6 and ie7 */
                    }
        </style>

Upvotes: 2

Ken Pega
Ken Pega

Reputation: 559

This could be a quick fix to make Base64 images showing up in IE6 again:

Base64 image fix for Internet Explorer

*Sorry for the broken link, now comes the correct one!

I think this is a non-intrusive way to make things working again. It actually repair the images after you have those broken images (broken icon) already displayed on IE.

Upvotes: 0

presario1216
presario1216

Reputation: 131

My solution run smoothly on IE6. It may help you!

<!--
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>
</head>
<body> 

<div id="pic" ></div>
<div id=test style="display: none;">

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

iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8  /w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--=_data-uri--

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

Upvotes: 13

Barney
Barney

Reputation: 16456

IE6 needs an expression to correctly interpret base 64 encoded images. Dean Edwards describes the solution here: http://dean.edwards.name/weblog/2005/06/base64-sexy/

Note: this is a very ugly hack. In the first place we were putting image code in our CSS; with this solution you need to either put presentational data in Javascript, or behavioural data in your CSS. Nasty but necessary.

Upvotes: 4

Misha Reyzlin
Misha Reyzlin

Reputation: 13896

You can use base64 in CSS, at least. Please take a look: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

Perhaps more research could possible help using mhtml:// for inline images, too.

Upvotes: 1

mimetnet
mimetnet

Reputation: 657

ORGINAL

I do not believe IE6 supports in-line data for the <img/> tag. However, you might want to try another format like GIF or JPG.

EDIT Given the fact that it took IE forever to accurately support PNG (still debatable) one could easily deduce that PNG might not be supported as an in-line data format for <img/> tags. With that said, goto **ORIGINAL**

Upvotes: -1

user153498
user153498

Reputation:

If this isn't for a corporate setting, I'd say just drop IE6 support all together, and have people install Chrome Frame if they insist on using such an outdated browser.

Upvotes: 1

Cullen Walsh
Cullen Walsh

Reputation: 4388

Install Google's Chrome Frame?

Seriously, you can't. IE6 does not have support for base64 inline images.

Upvotes: 6

Related Questions