Can I add multiple sources to an image tag?

Question

In case the original image is unavailable, is it possible to keep a backup?

Answer 1

Can't do with img tag but instead of img you can use picture tag ..
Follow the link 👇👇
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Answer 2

i think there are some work around

function getBackup(el){
let currBackup = el.dataset.currentbackup;
let backup = JSON.parse(`[${el.dataset.bakup}]`);
if(currBackup >= backup.length){
//handle no backup
return;
}
let src = backup[currBackup++];
let imgTemp = new Image();
imgTemp.currentBackup = currBackup;
imgTemp.backup = backup.toString();
imgTemp.src = src;
imgTemp.addEventListener('load',e=>{
el.src = src;
}
imgTemp.addEventListener('error',e=>{
getBackup(e.target);
}
}

<img src='source.png' data-backup='backup1.png,backup2.png' data-currentbackup='0' onerror='getBackup(this)' />

havent tested it, dont know if it'll work, but you can see what i'm trying to do and maybe fix it yourself

Answer 3

if I understand you correctly only
one source per
<img src="one source per" alt="1 source">