title: Once an image has failed loading, how can I make the browser retry?
body: <p>I'm making a Chrome extension which in order to reduce bandwidth usage it stops all outcoming requests which are images.</p>
  
  <p>I want to provide functionality where if the user clicks on the image (or technically <a href="https://stackoverflow.com/q/26823957/1622940">a layer on top of that image</a>) it would try to reload the image, this time not being blocked by the extension.</p>
  
  <p>How can I tell the browser to retry loading the image? And if there isn't a straightforward way to do it, what would be a work around? Deleting the old image from the DOM and adding it again?</p>
  
  <p>Any help is appreciated. :)</p>
  
  <p>EDIT 1:</p>
  
  <p>To answer @CBroe's question:</p>
  
  <p>Using the <a href="https://developer.chrome.com/extensions/webRequest" rel="nofollow noreferrer"><code>chrome.webRequest.onBeforeRequest</code> API</a> in a background script.</p>
  
  <p>To answer @jfriend00's question:</p>
  
  <p>The usual placeholder "couldn't load image" icon, I guess also known as "broken file" icon:</p>
  
  <p><img src="https://i.imgur.com/VJWYZS1.png" width="300" alt="broken file icon example"></p>
  
  <p>See all those broken images?</p>
  
  <p>That screenshot also illustrates the point of a layer on top of another image. Should those images not be broken, the loaded image would be there but that layer (the one in a dark grey which shows the image's dimensions) still remains there.</p>
  
  <p>The desired <code>href</code> still exists there in the <code>img</code> tag:</p>
  
  <p><img src="https://i.imgur.com/pn0bfAp.png" width="300" alt="example of a broken img tag which retains href"></p>