onerror <img> tag attribute always fires in IE, why?

Question

I have code something like this

<a class="img" href="LINK">
  <img src="GOOD_IMG" title="title" onerror="src='ERROR_IMG'">
</a>

in FireFox and chrome it behaves as you would expect (shows GOOD_IMG if it exists and shows ERROR_IMG if not) but in IE (9) it always shows the ERROR_IMG.

If I debug in IE and on the fly set the onerror so something else e.g.

onerror="alert('error')" 

then the alert message appears and the correct image is shown.

What could be causing IE to cause onerror to activate where the other browsers don't have a problem?

Is there someway I can find out what is causing the onerror?

Thanks

Answer 1

I also experienced similar symptoms. In my case, 'onerror' occurred by putting 'empty' value in src at <img>.

Problem:

html

<img src="" onerror="this.src='ERROR_IMG'">

js

$('._profile_image:first').attr('src', IMAGE_URL);

Solution:

<img onerror="this.src='ERROR_IMG'">

Answer 2

You can try like this. First you have to write one JS function for checking whether the image is exists or not (AJAX call return exists or not) and change the image accordingly.

Second you call the function on onerror event

function imgError(imageControl, path) {        
            $.ajax({
                type: "POST",
                async: true,
                url: "test.aspx/CheckImageExists",
                data: "{'imagePath':" + JSON.stringify(path) + "}",
                contentType: "application/json; charset=utf-8",
                success: function (response) {
                    if (response.d == "exists") {
                        imageControl.src = path;
                    }
                    else {
                        imageControl.src = 'img/errorimg.jpg';
                    }
                }
            });
            return true;
        }

<img src="<%# "admin/"+ Eval("imagath") %>" onerror="imgError(this,'<%# "admin/"+ Eval("imagath") %>')">

C#
 [WebMethod]       
        public static string CheckImageExists(string imagePath)
        {
            string fullPath = HttpRuntime.AppDomainAppPath.ToString() + imagePath;
            fullPath=fullPath.Replace('/','\\');
            return File.Exists(fullPath) ? "exists" : "notexists";           
        }