How To Display Base64 Encoded Image In Html If It Is Located In A Separated File?

I have base64 encoded image. If I put it right into html it works: But when I put all that base64 content into a separated file, it do

Solution 1:

You would need to send the correct Content-type, Content-encoding and charset HTTP headers along with the file. Note that they are all part of the data: URI schema as well. You really should have a charset=utf-8 or similar clause between the content-type and the encoding:

url(data:image/png;charset=utf-8;base64,...);

Solution 2:

You can simply take on server side approach and just print the file into the src part of the img tag like so:

<imgsrc="<?phpecho file_get_contents('some/path/image.txt');?>"

Where your image.txt contains i.e.: data:image/png;base64,...

Solution 3:

You cannot do that, I believe. The first syntax corresponds to a pseudo protocol (scheme) data: that means that the data is not to be fetched from somewhere outside, but from the attribute string itself. As the "data" is in general binary, and the attribute is text, base64 is commonly used.

But when the data is fetched from outside the page (http server, or local filesystem), the data must come in raw (binary) form.

You could do it with some javascript work, of course.

Solution 4:

I did something similar for my final year project at university, i was using XML doc's to link to a page and show the images in a canvas element. I made it so the image was searched for a variable, then assigned the variable with base 64 encoded image like so:

xmlDoc=loadXMLDoc("test.xml");

x=xmlDoc.getElementsByTagName("image");
txt=x[1].childNodes[0].nodeValue;
document.write(txt);

var card1 = txt;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=newImage();
img.onload = function(){
    ctx.drawImage(img,0,0);
};
img.src= card1;