JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class='iframe'>
<button onclick="ClickButton(true)">Load Valid Image</button>
<button onclick="ClickButton(false)">Load Invalid Image</button>
<img id="img1" src="">
</div>
</body>

JavaScript

//Function to put in parent document
function ImageError() {
     alert('Sorry, that image is invalid');   
} 

//Code for iframe
function ClickButton(valid) {
    
    var image = new Image();
    image.onload = function () {
       $("#img1").attr('src',image.src);
        alert('Image loaded!');
    }
    image.onerror = function () {
       ImageError();
        //If this were actually in an iframe, we would call: parent.ImageError();
    }
    
    if (valid) {
        image.src = "http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png";
    } else {
        image.src = "http://invalidimage.com/invalid.jpg";
    }
    
}