Tengo un programa con imágenes de actualización dinámica que estoy actualizando desde un script, cuando no puede encontrar una imagen, quiero que muestre una imagen de respaldo. Intenté usar este onerror="this.onerror=null;this.src= pieza de código en la etiqueta html img, pero solo funciona una vez y no funciona una vez que la fuente img se actualiza desde el script. No estoy seguro de cómo solucionar esto.
Como comenté anteriormente, debería ser una implementación del lado del servidor.
Pero escribí un código del lado del cliente para ti.
Solo necesita agregar un "imgSrcArr" que contenga todas las fuentes posibles y alternativas en una matriz. Y sigue comprobando la dimensión del elemento img. Si la dimensión es 0, simplemente cambie la fuente.
<body> <img src="null0" /> </body> <script> window.addEventListener("load", (event) => { var image = document.querySelector("img"); var imgSrcArr = ["null1", "null2", "https://picsum.photos/200/300"]; let index = 0; // img index to be incremented let thisInterval = setInterval(() => { var isLoaded = image.complete && image.naturalHeight !== 0; console.log("Checking Image => " + index); if (isLoaded) { // if image is loaded console.log(isLoaded); console.log("Image loaded :)"); clearInterval(thisInterval); // clearInterval } else { console.log("Changing img source=> " + index); image.setAttribute("src", imgSrcArr[index]); if (index <= imgSrcArr.length) { index++; } } }, 2000); }); </script>