Strange code behavior

Question

When create some 64base image and copy src of it like

orig_src.src = image_target.src;

I have next "Resource interpreted as Image but transferred with MIME type text/html:".
So I delete all not important code and create Jsffidle demo So this is simple image chooser and it previews choosen image, and it must alert src of this file, but it is alerting link of page. Why? It is interesting that if who second time image it works fine. How can I fix it and what is the reason of such behavior?

Answer 1

You are alerting before the reader.onload event is fired, because it takes time to load the image. It is asynchronous, which means that your code just keeps executing until it's loaded. Just move your alert() statement inside reader.onload:

reader.onload = function (event) {
 e.target.parentNode.getElementsByTagName("img")[0].setAttribute('src',event.target.result);
 alert(e.target.parentNode.getElementsByTagName("img")[0].src);
}