javascript - ver si src de img existe

img src url

Question

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

Answer 1

Si creas src dinámicamente con javascript, puedes usar 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'');
}

Answer 2

Te estás acercando a esto por el camino equivocado.
Cuando genere 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 puede modificarse y deshabilitarse.

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

Answer 3

puede hacer una llamada ajax anterior (con el método head ) y ver el código de retorno del servidor o puede usar el evento onerror para cambiar la URL o hacerla oculta, por ejemplo

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

(He usado el atributo en línea solo para explicar la idea)

Answer 4

Puede utilizar el evento de error :

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'';
};

Versión en línea:

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

O

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

<img> etiqueta <img> admite estos eventos:

• abort (en Acortar)
• error (onError)
• load (onLoad)

Más información:

• Eventos de JavaScript
• error de jQuery