Base64 Image Not Showing Up In Ie6
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 o
Solution 1:
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:locolocoContent-Type: image/pngContent-Transfer-Encoding:base64
iV... // image here
--_
Content-Location:locoloco2Content-Type: image/pngContent-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
/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/AAAAF5jcHJ0AAABXAAAAAt3dHB0AAABaAAAABRia3B0AAABfAAAABRyWFlaAAABkAAAABRnWFlaAAABpAAAABRiWFlaAAABuAAAABRyVFJDAAABzAAAAEBnVFJDAAABzAAAAEBiVFJDAAABzAAAAEBkZXNjAAAAAAAAAANjMgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB0ZXh0AAAAAEZCAABYWVogAAAAAAAA9tYAAQAAAADTLVhZWiAAAAAAAAADFgAAAzMAAAKkWFlaIAAAAAAAAG+iAAA49QAAA5BYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAAAAAkoAAAD4QAALbPY3VydgAAAAAAAAAaAAAAywHJA2MFkghrC/YQPxVRGzQh8SmQMhg7kkYFUXdd7WtwegWJsZp8rGm/fdPD6TD////bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/CABEIAKAAoAMAIgABEQECEQH/xAAbAAADAQEBAQEAAAAAAAAAAAADBAUCAQAGB//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwAAARECEQAAAfiw7yeL3Br2dHG1Tm9ZGdwXYBxV08gMYQetA8GyZyYJvOemi5ZOGJ4FjRxcVnRL7RRJxy5BF1gB4ozIN4Pb8yFpkoADMGAt+6cAYRPh2YZzB+ifCiOq84FC0uULUi8EIMxvfOmiDIeXKoT476grrORgOCCw9jLqL4BS/M2XNKHKHvniH0G47A0LBCBJ+2mnzO+cNlUpkvF2QWhNAJ7W+D7XCCk2ogPmlaKRpjpwVXJ8ojdTO/RpUjHzd2EEwlwrtr2hxN9QXVdGJUOunOnCLLmAQGHxjLIjCvyVCYOz7KIf6D5KwfQ9RcAt9GNbDwIvwJwfRgwGVHlDKGB1Kp8vwJSdSA2UnYxCzyf0f4DZwehHR+GYB5gLOozihfkWT83p6dGU6OBQstwb9woIuBBRjCGWGwdc9oEi6sUHt0Jf/8QAJhAAAgIBBAICAgMBAAAAAAAAAQIAAxEEEBIhEzEiMiBBBRQjQv/aAAgBAAABBQI9b9iZmYD2BOoHhOZwYzxGJWAeY5F+zPW7bZ6yZ7mJiKIVmNvLgc2MB41ct+MM/R/HEA7xiZ2OZgmIktPWJw+IEXsfth2/4CKsAhE4mLSxg0jT+vPHwhHI4AnLb9noExjncRUiUdLSs8CxdMggRRsRLvoVmIwi+z09hE9w9GAZiVkmqnEAgAgmdjtefhznuETx/Kz2diOpphmKgEGw3EMaWdl0gYiB4H7b5QjYr1iabqDsCD8TLY7/ADLfEw+gpJ9Q7GsGPViI5Q12g7BsEYMxOMxGjDI1GncTkYcxe5XMdYySOyWK4GfiJxQzTkk2qYbLUiahoLrINQRPOp3u0qPPq3U9Gqp7I+kXDAqT9MZhT5KVUVsATesZ6zA4BqsBHOchOSiHVplv7FosoCT/AKq03M1VhlsUCa1ACuMfv22B5K9OtcPt1hrmRVHtURV1NsTQCBFSNL/slebMEBRyq7469v8ATkBMloi5ldObWT/Ph0ywrPFzldKLMT1GhmpB8lK4VSITGIVbG8lj5BFhE07ZXTDt/bYhBmDFQ5A2aNswBJlKiWdTVajyRftYNtM8pu684nOppmKdy0Jh2MYxNQAt9jWDQ6RbZfpeFhGY9UTKWVrydBAvKcBgdTMzCZnYwxovQt+v8aYaw67WTT2xGEBnOEzMJ/FjF+TS6fx6/wCiCeQTM8JsZaPG3AqQ7LPK08sB2O5MY5iLgGWe9HhRWRgdyuoxFCjUvwYWBpzE5loRkIcTlMzMLQtEXZofa1ltMlLYpo8YAi1Ey6gMor4lVMG2MbZhaZzESAbGfuoYoT1//8QAFhEAAwAAAAAAAAAAAAAAAAAAABFg/9oACAECEQE/AaNn/8QAFhEAAwAAAAAAAAAAAAAAAAAAABFg/9oACAEBEQE/AaNH/8QAKBAAAgEDAwMEAgMAAAAAAAAAAAERAiExECAwEkFhAzJRcUCBIiOR/9oACAEAAAY/AuXJHYe+3BghI8De18F9bbOnY9Z4cF9IG9jjRvffTBZa2Hxy+B8HVrjilfhwPxw+OLqpvtk8aSouf2Nngs2Q2WMaYZek+NfhnS9fB7rn0LSBS7nVn6PbV/h3/a0tUYk9pLhIihOt+Dt6aMtvTqqwZhLsITGnqk1IqkovfYviSMvwWS9NE+pU62RSo0jRENH7FT42I6dtqVt+yWUoikl4Q6vnWSdntZjglq5J0U42Oktkmos+O6ZGKR11fpCrp9r1RJnlZ0jpey/O/rZY6crsZsWL0l1HHVU3Bksfy0pq7c9kncdMWqiS+dXSzp7r8D//xAAlEAEAAgICAwEAAQUBAAAAAAABABEhMVFhEEFxgZEgobHB0eH/2gAIAQAAAT8hUOWU8TBpqDG45jKIauZjeCAGAuO61DVIX5/tOsOYhZpLG41HrmXRLlYfChKGLM7phZZh8h6Srw75zLFheMQ6vSWFxiLb7lLmbY5EGYrebd+DBfghB6MR3GSXPf5LtuMf/IOzn7BfVvEYIm1Rpbubxi7xqU5TQ9cTflL8EHPi6MnMZ1LHX8RLGUwaEz9MSFBjcuR/Juv2LaOGYSzcyFyhqCFf4QfIWzVRuYTf5NizBDQXNxGhPyIVB4IaRheIl0j/AO5SvcQWiVZjVFwhsPC6QQEx8jB3OBATSXfguJ9wz4lC4CX7gqxVTvcSuY6ntpuGUT3KeD5XB8joiuuUPLCaiDnU04Mk8mp4HB5YYYQXKonqEIosTIXEsk5lVMtYRpzCwjqF2+d2yFsLBGHcu9TcRDuU5h2hO0FhjFTSUWRQcrY6d1HIHWp7ekUpAKj0ublnvUXDZeCMb5FFypbjAQvGYj/hMZdLdbSx0xLhKh3Ec0TLeKlOzE0pXJgGDl2JTAMHrEQKYo0X3DintNkjUudP2L5afQlrqzqWbB2RPsfEE3h8gGzsM+AIYW/7TLy+SYYBPWnGMCv8hDgGGC/aS+zzqppFUw4NRaok1MZikEWViYcEz5yTJLTylOBq0If9yy39gcQGiOpoyjd7IYrqWIhbQGElrJuouF6sxksXUXOAmskL8I4uYE2ylBxmadPyHGaeGkAEv0i+yYr+VZuwnLNDMzfuW7tQ2L8cEV15ljqyV1EnhnoNy+G0odzrgARRRhxTJNITYgFm1FyN8vM0EweMFnyGFWG+pc0KfIk/zTZrRLiFQa/oCvhRCGV0XFVH3cs2fq4Vw6uGCImyWB5lhp8iXtB2gEZqhD4jKxeDtqCLqBZpqAJi3w6m8DWzOXEMjiEeyHiL4WL4B+McE0qILFg/YQokpjTmX6bS7eJPb38ghl/IUab6l3vyWXKJaon2ppMhCCBq1lg0xlzqWxyYTK/IR1c7aUw+xGAN0MVaA6mwzNCMssURnE97AmkNmZ/udPypiAVVfoMzIbd9TVW4xTiKncvm+iyfZCyoiGMVyzxPayqPjU03yHCf/9oADAMAAAERAhEAABDCzjyiDggBgAwSRgyyQBASRxhyBiBwwiywwAhAzwjgjBhyxAByyBgAxSAAgihwQQxjjQBThRhDCRAjASAiAiTAADQBiQgggxxywQf/xAAXEQEAAwAAAAAAAAAAAAAAAAABABFg/9oACAECEQE/ENGMKn//xAAXEQADAQAAAAAAAAAAAAAAAAAAARFg/9oACAEBEQE/ENHDdP/EACUQAQACAgICAQQDAQAAAAAAAAEAESExQVFhcYGRobHBENHh8P/aAAgBAAABPxD0olnbDzIFw+BDCUrisxmoPhICGhe464i7uWm3WRzKGFcpG6tcCxSifmY0CG7XUtlFyQYItGzdc1/szElqHzDEB2W+yCBWcVM0bIFtallPObhzGos5K4ma9Lupd9jtiKItsZ4hJZr43LtOThGGuLMQrup1MIXri7JUhfbWfUVrVxh94CIBQTANbhWba3Mhe5gUMUXFKi1TX2mKND+Zgkch+YUqlBbJfUVi+CO7vEBesS7A/FyoPYHJFSgnxFtZHYiaAE4IRVNm0MEgQ6hYwDk4xHJw5U5img8RMJFpKcbr5gDSqWBkjDsIAb4K5cQCRjlLRVghjQQdNTDdL5I1Xl0NwHBOaI1lnwIAF8DcAohVpcAW1FodzmgiH7RwYrKPsQOZVGkYHGR+YjmOSHsP7haFKL+cRSSZzfUa/aIIbVVM3C5WHcW8xwLqKJR0OY/AnS6ggNBnLFhBT7/ea51qlMuCseoi6A8EI5m0CLB4G4629h6dSvjldaI+TdAA81KHOWv6lQLK2kRDGcE8STmak1CItYRRR3r4l0R9I1GCth7bgCpifYjwq4hiV+0C4bSh4iUKsyi/MHJZp/EMBtGYi3Ay2LkCxc+0RzlRBRaqbMGkyogD2QKDLADEvVcQ6PxM2Ys+9xdy9z7j2FDlPHH5l5r4RJkmkZtDKxhoX3YDFty+sBKbyXvcw+Q4hclHEaMQcMAtIEQ1DIdsDtNahxXRFvJUcd6T9yxvLz9RgAqMJ1cFI3gWkiGEFVSEAXRnBqAg0chElCVHdEK1Hs2DuMGQ+IVbAa6gCeEEhVLTSXOIS7BEgT1nK1KkDJAzUoahKSMBaS9tSiHL+kNAorLFVD4M/MVtuypWxfqPCxYtdfSpaKLx+8xKNr1Uy4KHkV9ZYAgRrNQybJWiYAqOb3HkhRwQhUubyJRMQbpzC4nu1AFh9ZyC5btchc+YAPYNKR2ghAxCjA23cJyrxVccOHkq/UobKqhmACcDUR6n7SkgqwYYHRLsIV17l7XqALV/4ma8erPwsIwUwCr7So8Vl2xSW7Aw24epnUHauUaHRRKGVzQE9120+suY6t4Zl2W3HZX9wrBt4leeITkwaYQBp/xBY6GiEhSR+JTFAw7RL2hxcAzhpTBcNFiy/wDrmmAKuKcavGXxClUrVua4v3AdDtCo40XcpbEjtVkpp/dRlJBLV8lr7hUc8Oa+ZUD+aYHxKwNwAlEu9zLBkPVw+7F0epXnC0BwT0gZJDKQCl9zbR+YX/JzgsoKMaXcsaZ0lxB2LvRDU1nJO5Tc4BZd0yhshBQ+JauAK1zxXzKx7FtKzCIoMV3HaF9wYrIARjkwD4gTVjI0EACKmin4I0SqpyR8k0ejgioKVpdwW/KwQuMIV9CKy7ZOkFLdGxjSyZw4l2kL6zDiwkV8G4/yZgZU64P8BBuhqUKgHARYBZheIFghMQg0t26PEY8G5esRKWNrmriq5hHYg9zu2Ze6L0QO52kIHmXPqCP3EqljxWzAsefM3eszACnKH6TGyNmv6CBrbMrFncxjLkfS9SpMtMVhDRjD3lVqriOAeZSOVRyAOOIV+jKOZUYZc2vMZGpm/gVbZgHLBA8S8eGODQlvz5lhhAYhN0uXOGUx6Gz/ACXKx9wgtwOmBdfmA6mCMlRcZlBMUoNxR6gYeiO/MwlYAXLwZtfmNoWoYJicqTnpMTRANPP6hsAjHNMfqleTSXO13GxFixDsGHcfbEBnL3MkcoVmyJk1dSqKy2zGRW8wDVCiD6wOh9LDdvULgWaCCnB04j1YW4ZNtiVqHQlWQkGedS1NBVCj6QUcz3PhP4L4PLDG47TMfzfiCGosgnrTOUJ3AS3L3K8oNYfuaDXMIK0svwiqAqcEs9fnmo222RTTFyE8C+oPFtO4KsQbiCNGWOmCcwg5jvFRFICArUrVTRmdo3HGabOp/9k=
*/
#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>
Solution 2:
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.
<divclass="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>
Post a Comment for "Base64 Image Not Showing Up In Ie6"