The following could work:
<img id="image" src="http://externalsite.com/foo.png">
const image = document.getElementById('image');
let loaded = false;
function swapImage() { image.src = '/not-available-image.png'; }
image.addEventListener('load', () => loaded = true);
setTimeout(() => {
if (!loaded) swapImage();
}
}, 3000);
This sets up an event listener on the load
event, and when it fires sets the loaded
variable to true. Then it also sets up a three-second timer, and when that fires, if the image hasn't been loaded yet, it swaps it to your non-available image. The only problem with this approach is that in the interim period between the retrieval of the original image failing, and the expiration of the timer, you will see the "broken image" icon.