JSFiddle - React, Tailwind, and code Playground

HTML

<div id="thisWorks">this works in Chrome. onerror event is called once.
    <img src="http://eatfrenzy.com/images/bogus1.png" 
        onerror="fixit(this);" 
        rsrc="http://eatfrenzy.com/images/success-tick.png" />
</div>

<div id="thisDoesNotWork">this does not work in Chrome. onerror event is not called twice.
    <img src="http://eatfrenzy.com/images/bogus1.png" 
        onerror="fixit(this);"
        rsrc="http://eatfrenzy.com/images/bogus2.png|http://eatfrenzy.com/images/success-tick.png" />
</div>

CSS

#thisWorks
{
    border: 1px solid green;
    display: inline-block;
}

#thisDoesNotWork
{
    border: 1px solid red;
    display: inline-block;
}

JavaScript

const creator = document.createElement("img")
  creator.src = "https://firebasestorage.googleapis.com/v0/b/growthfile-207204.appspot.com/o/ProfileImage%2FoXR3uXWzUHQO1mhpGRI7x66wDqW2?alt=media&token=14984b17-f49d-4157-a531-b653316a5f46"

  creator.onerror = "fixit(this)"
  document.getElementById("thisWorks").appendChild(creator)

function fixit(img)
{
	alert(img);
    var arrPhotos = img.getAttribute('rsrc').split('|');
    
    // change the img src to the next available
    img.setAttribute('src', null);
    img.setAttribute('src', arrPhotos.shift());

    // now put back the image list (with one less) into the rsrc attr
    img.setAttribute('rsrc', arrPhotos.join('|'));

    return true;    
}