title: How to catch img 404s that respond with a placeholder?
body: <p>Is it possible to listen to an error on an image if the server sends a &quot;backup&quot; image (while still responding with a 404 status code)? This particular incident is related to YouTube thumbnails. I know you can listen to the <code>error</code> event on the element, but that only seems to trigger if the request does not resolve into an image at all.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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;
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;This image correctly resolves the error:&lt;/p&gt;
  &lt;img src="https://www.example.com/not-an-image.jpg" /&gt;
  
  &lt;p&gt;This image is a 404, but the server sends a backup:&lt;/p&gt;
  &lt;img src="https://i1.ytimg.com/vi/blahblah/mqdefault.jpg" /&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>