JSFiddle - React, Tailwind, and code Playground
HTML
<div style="background-color:black;"><img src="http://fiddle.jshell.net/img/logo.jpg" onerror="imgError(this);" /></div>
JavaScript
function imgError(image) {
image.onerror = "";
var image_src=image.src.substring(0, image.src.length-3);
image.src = image_src+"jpg";
$.ajax({
type: "HEAD",
url: image.src, //or your url
success: function(data){
alert("png sucess");
},
error: function(data){
image.src = image_src+"png";
$.ajax({
type: "HEAD",
url: image.src, //or your url
success: function(data){
alert("JPG success");
},
error: function(data){
alert("JPG fails");
},
});
},
});
return true;
}