ver si existe el src de img

Question

cuando coloco una etiqueta img, creo dinámicamente el atributo src. ¿Hay una manera de probar si el src (ruta donde se encuentra la imagen) existe realmente con javascript con el fin de evitar que:

Answer 1

Puede utilizar el error evento:

var im = document.getElementById('imageID'); // or select based on classes 
im.onerror = function(){ 
    // image not found or change src like this as default image: 

    im.src = 'new path'; 
}; 

línea Versión:

<img src="whatever" onError="this.src = 'new default path'" /> 

O

<img src="whatever" onError="doSomething();" /> 

---

<img> etiqueta apoya estos eventos:

• abort (OnAbort)
• error (OnError)
• load (onLoad)

Más información:

• JavaScript Events
• jQuery's error

Answer 2

se puede hacer una llamada AJAX anterior (con head método) y ver el código de retorno del servidor o puede utilizar onerror evento para cambiar url o hacerlo oculto, por ejemplo

<img src="notexist.jpg" onerror="this.style.visibility = 'hidden'"> 

(He usado atributo en línea sólo para explicar la idea)

Answer 3

lo aborda de manera equivocada.
Cuando genera sus enlaces con el script del lado del servidor, verifique si el archivo existe o no (utilizando file_exists() en PHP, por ejemplo).

No debe confiar en JavaScript cuando puede hacerlo en el lado del servidor, ya que JavaScript se puede modificar y deshabilitar.

Pregúntese usted mismo cómo está generando los atributos src=, y verifique si el archivo existe o no, y proporcione una alternativa.

Answer 4

Si crea el src dinámicamente con javascript puede utilizar esto:

var obj = new Image(); 
 
    obj.src = "http://www.javatpoint.com/images/javascript/javascript_logo.png"; 
 

 
if (obj.complete) { 
 
    alert('worked'); 
 
} else { 
 
    alert('doesnt work'); 
 
}