javascript - onerror <img> tag attribute always fires in IE, why? - Stack Overflow

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

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

• javascript
• image
• internet-explorer
• onerror

Share Improve this question Follow edited Apr 9, 2013 at 16:26 Trinimon 14k99 gold badges4646 silver badges6161 bronze badges asked Apr 9, 2013 at 16:21 ChrisChris 7111 silver badge22 bronze badges 6

• Try setting onerror to something like myFunc(e) and log e in the console – MMM Commented Apr 9, 2013 at 16:33
• Works for me in IE8 and IE9: jsfiddle/LyZmq Could it be that IE doesn't recognize that specific image? – Alexey Lebedev Commented Apr 9, 2013 at 17:08
• I've found that if it doesn't somehow immediately get the image, it will fire the onerror. We use this to our advantage in our application that dynamically sets the source of profile pictures from a database, so onerror fires and we set it to the default contact picture until the actual picture loads in. – Jacob Morrison Commented Apr 9, 2013 at 17:47
• MMM's method is what I would like to try but I don't know how to do this, can someone provide more information on this? (if I just do as said then I get "e is undefined") – Chris Commented Apr 10, 2013 at 8:55
• Having this exact same issue – user3953989 Commented Aug 3, 2015 at 18:22

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

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'">

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";           
        }