JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

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

function fixit(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;    
}