Javascript Image onError not working when updating image src on hover

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?

from Javascript Image onError not working when updating image src on hover