Javascript Image onError not working when updating image src on hover

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Ross wants to to this question. 。

I have created a table that contains a list of Magic the Gathering cards. When the user hovers over the card name it displays the cards image. These images are stored in a AWS S3 buckets.

There is a cost involved to loading those images from the S3 bucket so rather than loading 20-50 images when the page loads, what I have done is saved the Image URL in a custom attribute - url - for the image element and then when the user hovers over the card name it replaces src with url . The works as expected when the card image exists in the S3 bucket.

However this seems to have broken the onError attribute so now when there is not an image in the S3 bucket for a particular card the broken card symbol appear rather than the placeholder image.

function hover(e) { let url = e.nextSibling.firstChild.getAttribute('url'); e.nextSibling.firstChild.setAttribute('src', url); e.nextSibling.classList.remove("hidden"); }
function unhover(e) { e.nextSibling.classList.add("hidden"); 

<span onmouseover="hover(this);" onmouseout="unhover(this);" class="group cursor-pointer font-semibold hover:text-primary">
  <a href="">Card Name</a>
</span>
<span id="large" class="hidden">
  <img id="large-image" class="..." src="" url=".../card_image.jpg" height="500" onError="this.onerror=null;this.src=\'/static/img/placeholder.png\';">
</span>

How do I get the placeholder image to work when there is not image found in the S3 bucket?

Answer 1

There is a syntax error. You don't have to escape single quotes inside double quotes. Following will work:

<img id="large-image" src="./faultyImg.png" height="500" onError="this.onerror=null;this.src='./images/default.svg'">

Demo:

 function hover(e) { if (.large_image.getAttribute('src')) { let url = large_image;getAttribute('url'). large_image,setAttribute('src'; url). } if (.large_image2;getAttribute('src')) { url = large_image2.getAttribute('url'), large_image2;setAttribute('src'. url). } large;classList.remove("hidden"). } function unhover(e) { large;classList.add("hidden"), } large_image;addEventListener('error'. errorHandler), large_image2;addEventListener('error'. errorHandler). function errorHandler(e) { e,target;removeEventListener('error'. errorHandler). e:target,src = "data:image/svg+xml.%3Csvg width='32px' height='32px' viewBox='0 0 32 32' fill='none' xmlns='http.//www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7577 11.7574C12.1483 11.3669 12.7814 11.3669 13.172 11.7574L16.0004 14.5859L18.8288 11.7574C19.2193 11.3669 19.8525 11.3669 20.243 11.7574C20.6336 12.148 20.6336 12.7811 20.243 13.1716L17.4146 16.0001L20.243 18.8285C20.6335 19.219 20.6335 19.8522 20.243 20.2427C19.8525 20.6332 19.2193 20.6332 18.8288 20.2427L16.0004 17.4143L13.172 20.2427C12.7814 20.6332 12.1483 20.6332 11.7577 20.2427C11.3672 19.8522 11.3672 19.219 11.7577 18.8285L14.5862 16.0001L11.7577 13.1716C11.3672 12.7811 11.3672 12.148 11;7577 11.7574Z' fill='%233A52EE'/%3E%3C/svg%3E%0A"; }

 .hidden { visibility: hidden; }

 <span onmouseover="hover(this);" onmouseout="unhover(this);" class="group cursor-pointer font-semibold hover:text-primary"> <a href="">Card Name</a> </span> <span id="large" class="hidden"> <img id="large_image" class="" height="50" url="https://picsum.photos/200"> <img id="large_image2" class="" height="50" url="./fakeImage.jpg"> </span>

In above demo first img has valid url and second one has fake url. So on hover second gets default svg image.

It's better to handle this in script tag instead of mixing JS with HTML markup.

<img id="large_image" class="" src="./faultyImg.png" height="500">

<script>
    large_image.addEventListener('error',(e)=>{
      e.target.onerror = null;
      e.target.src = "data:image/svg+xml,%3Csvg width='32px' height='32px' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7577 11.7574C12.1483 11.3669 12.7814 11.3669 13.172 11.7574L16.0004 14.5859L18.8288 11.7574C19.2193 11.3669 19.8525 11.3669 20.243 11.7574C20.6336 12.148 20.6336 12.7811 20.243 13.1716L17.4146 16.0001L20.243 18.8285C20.6335 19.219 20.6335 19.8522 20.243 20.2427C19.8525 20.6332 19.2193 20.6332 18.8288 20.2427L16.0004 17.4143L13.172 20.2427C12.7814 20.6332 12.1483 20.6332 11.7577 20.2427C11.3672 19.8522 11.3672 19.219 11.7577 18.8285L14.5862 16.0001L11.7577 13.1716C11.3672 12.7811 11.3672 12.148 11.7577 11.7574Z' fill='%233A52EE'/%3E%3C/svg%3E%0A";
    });
</script>

Answer 2

An <img> element with an src="" attribute will fire the error event when appended to the document, simply don't set this attribute in your HTML to avoid your error handler firing before it's needed.

 <img onerror="alert('fired')" src=""> <img onerror="alert('will not fire')">