How to detect onerror from dynamically created img elements using JavaScript file only

Question

Is there a way to detect when a dynamically created img src path returns an error without using the onerror property in the HTML syntax, but using just a JavaScript file?

My HTML:

    <img class="icon" src="/test.png" alt="Logo">

My JS, using JQuery 3.3.1:

$(document).ready(function() {
    $(".icon").onerror = function() {
        $(this).attr('src', '/res/default-icon.jpg');
    }; 
});

Or also tried like this:

$(document).ready(function() {
    $(document).on("error", ".icon", function() {
        $(this).attr('src', '/res/default-icon.jpg');
    });
});

But it doesn't work. Thanks for the help.

Possible duplicate of [Check if image exists on server using JavaScript?](https://stackoverflow.com/questions/18837735/check-if-image-exists-on-server-using-javascript) — Muhammad Usman, Jan 04 '19 at 11:25
Try `$(".icon").on("error", .....)` or `$(".icon")[0].onerror = .....` — Titus, Jan 04 '19 at 11:32
You can do it but only where you dynamically add the image. As far as I know, you can't delegate an error event handler so you can't attach it to a container element and then handle errors from images that you add later. Are you adding the images with your code? — Reinstate Monica Cellio, Jan 04 '19 at 11:44
The img elements are added with a php script. $(".icon").on("error", .....) still doesn't work — Snorlite, Jan 04 '19 at 17:43

comonadd · Answer 1 · 2019-01-04T12:11:15.630

You can load images like this:

const createImage = (src, defaultImgSrc=null) => {
  const img = new Image();
  img.triedDefault = false;
  // Specify the error callback
  img.onerror = (err) => {
    if ((defaultImgSrc != null) && (!img.triedDefault)) {
      img.src = defaultImgSrc;
      img.triedDefault = true;
    } else {
      console.error(`Failed to load image from "${src}": ${err}`);
    }
  };
  // Load the image
  img.src = src;
  return img;
};

const img = createImage("whatever/path/icon.png", "/res/default-icon.jpg");

Vadim Hulevich · Answer 2 · 2019-01-04T11:57:24.943

-1

on frontend you can set default background for this images:

<img class="icon" src="/test.png" style="background:url('/res/default-icon.jpg')" alt="Logo">

or with js handle error:

[].forEach.call(document.querySelectorAll(".icon"), (el) => {
    el.onerror = () =>
    {
        if (el.getAttribute("src") !== "/res/default-icon.jpg")
        {
            el.src = "/res/default-icon.jpg";
        }
    }
});

    <img class="icon" src="/test.png" alt="Logo">
    <img class="icon" src="/res/default-icon.jpg" alt="Logo">

you can try fix this on backend, for example set default image on nginx:

location ~* \.(gif|jpe?g|png)$ {
    root /var/www/somesite.com;
    try_files $uri $uri/ default-icon.jpg;
}

edited Jan 04 '19 at 11:57

answered Jan 04 '19 at 11:35

Vadim Hulevich

1,803
8
17

You don't know anything about the server, and the OP specifically asks how to handle image load errors in Javascript, which runs on the client. – Reinstate Monica Cellio Jan 04 '19 at 11:38
ok, i'm understand you, so what about style attribute, i've changed my answer – Vadim Hulevich Jan 04 '19 at 11:42
OP specifically asks how to handle image load errors in Javascript. This has nothing to do with default images - they want to handle error events. – Reinstate Monica Cellio Jan 04 '19 at 11:43
added snippet with js example, js inspector show me src was changed – Vadim Hulevich Jan 04 '19 at 11:57
How does that handle an image that is loaded dynamically (after that code has already been executed)? – Reinstate Monica Cellio Jan 04 '19 at 12:08
The window object does not have a change event. After that code has already been executed, you need again initialisation onerror events for all icons – Vadim Hulevich Jan 04 '19 at 12:20
Exactly my point. You need to discuss this with the OP, rather than post incorrect answers. – Reinstate Monica Cellio Jan 04 '19 at 12:23

How to detect onerror from dynamically created img elements using JavaScript file only

2 Answers2