Could not load image using javascript

Question

Is it possible to detect when an image does not load using JavaScript? I plan to use base64 for images, but browsers like IE 6 and 7 do not support it. So instead of displaying red x, I would like to detect such an error, and then display the image without base64. The following is an example of my intentions:

PHP $base64Img = base64 String; print("<img src=\"data:image/jpeg; base64, ".$base64Img."\" />"); JavaScript IE 6 catch img load error{ errorImg.src = "ieSafeImg.jpg"; } 

Answer 1

Use an event handler for the error event, for example

 print("<img src=\"data:image/jpeg;base64," . $base64Img . "\" onerror=\"this.src='ieSafeImg.jpg';\" />"); 

Answer 2

The image has an onerror event and the onerror event is fired if an error occurs while loading the image.

 <img src="image.gif" onerror="alert('The image could not be loaded.')" /> 

This is just an example of an onerror event. You can use it on your way.

Answer 3

You can set a couple of error handlers for the object:

 <img onerror="handleIEError()" onabort="handleIEError()" src=\"data:image/jpeg; base64, ".$base64Img."\" /> function handleIEError() { this.src = "ieSafeImg.jpg"; }