Pregunta Detectar si la imagen está rota en Javascript


Estoy agregando imágenes a un lienzo HTML5 usando Javascript:

img = new Image(); 
img.addEventListener('load', loadCallBack, false);
img.src = image_url;

Y entonces loadCallBack dibuja la imagen.

El problema es que a veces el image_url se refiere a una imagen rota o inexistente. Cuando esto sucede, aparece un error 404 en la consola y la imagen en el lienzo permanece en blanco. En su lugar, me gustaría poder reemplazar la imagen de src atributo con otro image_url.

Intenté lo siguiente y no funcionó:

img.addEventListener("error", function(){console.log("404");});

¿Cómo puedo detectar los 404s de las imágenes?

Nota: Todavía estoy buscando una solución, ya que ninguno de los dos publicados hasta ahora ha funcionado.


5
2017-09-06 20:00


origen


Respuestas:


Funciona en jQuery para mi ... http://jsfiddle.net/5v2qG/

img = new Image(); 
$(img).bind('error', function () {
      alert('error called');                                                
});
img.src = "invalid_img_name.png";​

4
2017-09-06 20:06



El mismo código que la respuesta de Kostia: solo para comparar la fealdad de jQuery y la belleza de javascript de vainilla:

function brokenImage() { ... }

img = new Image();
img.onerror = brokenImage;
img.src = "invalid_img_name.png";​

10
2017-09-06 22:11