How to display base64 encoded image in HTML if it is located in a separated file?

Question

I have base64 encoded image. If I put it right into html it works:

But when I put all that b

Answer 1

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=new Image();
img.onload = function(){
    ctx.drawImage(img,0,0);
};
img.src= card1;