Two possible image paths, one fallback image-CodePudding

I'm adding images to links dynamically by copying the link text to set the filename in src attr. If no image file matches the link text, a default image is displayed.

<a href="#">Argentina</a><br>
<a href="#">Brazil</a><br>
<a href="#">Colombia</a><br>
<a href="#">Peru</a><br>
<a href="#">Venezuelaaaaaaaaaa</a>

But the images (hundreds) can either be jpg or jpeg - how can I show x.jpg or x.jpeg and if neither found, show default.png? Can one rror be used a second time if both images fail to load?

$("a").each(function() {
$("<img>").insertBefore(this).attr("src", "https://www.sciencekids.co.nz/images/pictures/flags680/"   $(this).text()   ".jpg").on("error", function() {
    $(this).attr("src", "https://www.pocketfulofstones.co.uk/wp-content/themes/pocketful/img/ps_bottle_halo.png");
});

Or is there a better image fallback method when the filepath/filename is known, but the file extension can vary? Can src contain two URLs and display whichever is found? Multiple background images is not an option as the images have transparent parts.

JSFiddle

CodePudding user response：

Here's an example using a separate function to determine what to try next...

function tryNextImg(e) {
  if ($(e.target).attr('src').split(".").slice(-1)[0] == 'jpg') {
   // console.log(`try jpeg...`)
    $(e.target).attr('src', $(e.target).attr('src').replace('.jpg', '.jpeg'))
  } else {
   // console.log(`use default...`)
    $(e.target).attr('src', "https://www.pocketfulofstones.co.uk/wp-content/themes/pocketful/img/ps_bottle_halo.png");
  }
}

$("a").each(function() {
  let img = $("<img>").insertBefore(this);
  img.on('error', tryNextImg)
  img.attr("src", "https://www.sciencekids.co.nz/images/pictures/flags680/"   $(this).text()   ".jpg");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Argentina</a><br>
<a href="#">Brazil</a><br>
<a href="#">Colombia</a><br>
<a href="#">Peru</a><br>
<a href="#">Venezuelaaaaaaaaaa</a>