Is it possible to listen to an error on an image if the server sends a "backup" image (while still responding with a 404 status code)? This particular incident is related to YouTube thumbnails. I know you can listen to the error event on the element, but that only seems to trigger if the request does not resolve into an image at all.
const fallbackImageUrl = 'https://via.placeholder.com/320x180';
const images = document.body.querySelectorAll('img');
for (const img of images) {
img.addEventListener('error', function() {
this.src = fallbackImageUrl;
});
}
<p>This image correctly resolves the error:</p>
<img src="https://www.example.com/not-an-image.jpg" />
<p>This image is a 404, but the server sends a backup:</p>
<img src="https://i1.ytimg.com/vi/blahblah/mqdefault.jpg" />
A similar effect is achievable by sending a separate HTTP request to the image URL in order to check the status code, but I'm wondering if this is possible without another call.