title: Is it possible to give html images more than one fallback url?
body: <p>I found out that you can have a fallback URL for an <code>&lt;img&gt;</code> using <code>onerror</code> if the first loading fails.</p>
  <p>But it is possible to provide a list of sources (urls) to try and keep trying until one of them loads?</p>
  <p>I was messing around with this for about an hour and was working towards this solution with JavaScript. I think its very clunky and I wonder if there is more more pretty way of doing this.</p>
  <p><strong>My ugly approach</strong></p>
  <p>Each image has several data attributes such as <code>fallback1</code>, <code>fallback2</code> with the alternatives sources to load from if loading fails. Every image also has <code>this.onerror=null;this.src='error.jpg</code>
  So every image that fails to load will show the picture <code>error.jpg</code> instead.</p>
  <p>So an image may look like this</p>
  <p><code>&lt;img src=&quot;https://i.imgur.com/iYNdJeW.jpg&quot; onerror=&quot;this.onerror=null;this.src='error.jpg'&quot; data-fallback1=&quot;https://i.imgur.com/iYNdJeW2.jpg&quot; data-fallback2=&quot;https://i.imgur.com/iYNdJeW3.jpg&quot; /&gt;</code></p>
  <p>Call a script in <code>window.onload</code> that iterates over each image and check if the source ends with <code>error.jpg</code>.</p>
  <p>If it does it takes the first fallback url in that image's data properties (fallback1) and changes the source to that. Then removes that data-property from the image (not sure if that is possible or meant to be done), because he has already been tried. Then the script recursively runs again.</p>
  <p>The recursion stops if if no images' source ends in <code>error.jpg</code> OR If all images whose source ends with <code>error.jpg</code> do not have any data attributes (no more alternative sources to try).</p>
  <p>I think it would work, but it seem very very hackish.</p>
  <p>I found out about <code>&lt;picture&gt;</code> and <code>&lt;source&gt;</code> and was very optimistic, but <code>&lt;picture&gt;</code> just accepts a 404 if the image does not load.</p>
  <p>Has anyone come up with a better approach for doing this? Ideally I wish you could give <code>img</code> a list of urls and it would just keep trying until it got a non-error.</p>