img - obtener el src con jquery

jquery restablece img src en la función.load()

Question

Estoy tratando de encontrar la forma de restablecer el img src si la ruta del src de la imagen no es válida o no se encuentra ninguna imagen. Tengo una ruta img src creada dinámicamente que a veces puede estar apuntando a un directorio sin imágenes reales. En este caso, necesito cambiar el src a img/missing.jpg . He hecho esto sin suerte:

$(''.imgContainer'').append( "<img id=''pic'' src=''/dynamically/created/path/to/img.jpg''>" );
$(''.imgContainer img#pic'').load(function(){
     if( $(this).width() == 0 && $(this).height() == 0 ){
        $(this).attr({src: ''img/missing.jpg''})
               .css({width:''100px'', height:''100px''});
     }
 });

quizás haya una mejor manera de hacerlo, pero no lo sé ... Intenté usar $(this).onerror = //some function pero tampoco pude encontrar la manera de hacerlo funcionar.

cualquier ayuda sería muy apreciada ...

Answer 1

La clave del problema es que el evento de "carga" solo se activa en las imágenes cuando la imagen se carga correctamente, por lo que si especifica una ruta no válida, el evento de carga nunca tendrá lugar. En su lugar, quiere el manejador de ''errores'', así:

var img = $("<img id=''pic'' src=''/dynamically/created/path/to/img.jpg''>")
 .error(function(){
        $(this).attr({src: ''img/missing.jpg''})
               .css({width:''100px'', height:''100px''});
 })
 .appendTo(''.imgContainer'');

He simplificado un poco su código, por lo que el orden es: crear el elemento de imagen, vincular el controlador de eventos de error y, a continuación, agregarlo al documento. No sé si hace alguna diferencia práctica, pero parece tener más sentido configurar los controladores antes de que la imagen tenga una posibilidad de comenzar a cargarse (de lo contrario, la carga podría ocurrir teóricamente antes de que se haya asignado su evento).

Además, su verificación de ancho == 0 y alto == 0 no funcionará en todos los navegadores. Chrome y Safari le dan el ancho y la altura del ícono de "imagen rota" que muestran: 18x18px.