javascript - pantalla - mostrar imagen al cargar pagina web

Detecta cuando una imagen no se carga en Javascript

Question

¿Hay alguna manera de determinar si una ruta de la imagen conduce a una imagen real, es decir, detectar cuando una imagen no se carga en Javascript?

Para una aplicación web, estoy analizando un archivo xml y creando dinámicamente imágenes HTML a partir de una lista de rutas de imágenes. Es posible que algunas rutas de imagen ya no existan en el servidor, por lo que deseo fallar correctamente detectando qué imágenes no se pueden cargar y eliminando ese elemento HTML img.

Nota: las soluciones de JQuery no se podrán usar (el jefe no quiere usar JQuery, sí, sé que no empiezo). Conozco una forma en JQuery para detectar cuándo se carga una imagen, pero no si falló.

Mi código para crear elementos img, pero ¿cómo puedo detectar si la ruta de img conduce a una imagen fallida?

var imgObj = new Image();  // document.createElement("img");
imgObj.src = src;

Answer 1

jQuery + CSS para img

Con jQuery esto funciona para mí:

$(''img'').error(function() {
    $(this).attr(''src'', ''/no-img.png'').addClass(''no-img'');
});

Y puedo usar esta imagen en cualquier lugar de mi sitio web, independientemente del tamaño con la siguiente propiedad de CSS3:

img.no-img {
    object-fit: cover;
    object-position: 50% 50%;
}

SUGERENCIA: use una imagen cuadrada de al menos 800 x 800 píxeles.

CSS solo para fondo-img

Para las imágenes de fondo faltantes, también agregué lo siguiente en cada declaración de background-image :

background-image: url(''path-to-image.png''), url(''no-img.png'');

ADVERTENCIA: no funciona para imágenes transparentes.

Lado del servidor Apache

Otra solución es detectar imágenes que faltan con Apache antes de enviarlas al navegador y simpatizar con el contenido defualt no-img.png.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*/.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]

Answer 2

Aquí hay una función que escribí para otra respuesta: Javascript Image Url Verify . No sé si es exactamente lo que necesita, pero utiliza las diversas técnicas que usaría, que incluyen controladores para onload , onerror , onabort y un tiempo de espera general.

Debido a que la carga de imágenes es asincrónica, usted llama a esta función con su imagen y luego llama a su devolución de llamada más tarde con el resultado.

Answer 3

Esta:

<img onerror="this.src=''/images/image.png''" src="...">

Answer 4

La respuesta es buena, pero introduce un problema. Siempre que asigne onload o onerror directamente, puede reemplazar la devolución de llamada que se asignó anteriormente. Es por eso que hay un buen método que "registra el oyente especificado en EventTarget en el que se invoca", como dicen en MDN . Puede registrar tantos oyentes como desee en el mismo evento.

Déjame reescribir la respuesta un poco.

function testImage(url) {
    var tester = new Image();
    tester.addEventListener(''load'', imageFound);
    tester.addEventListener(''error'', imageNotFound);
    tester.src = url;
}

function imageFound() {
    alert(''That image is found and loaded'');
}

function imageNotFound() {
    alert(''That image was not found.'');
}

testImage("http://foo.com/bar.jpg");

Debido a que el proceso de carga de recursos externos es asincrónico, sería aún más agradable usar JavaScript moderno con promesas, como las siguientes.

function testImage(url) {

    // Define the promise
    const imgPromise = new Promise(function imgPromise(resolve, reject) {

        // Create the image
        const imgElement = new Image();

        // When image is loaded, resolve the promise
        imgElement.addEventListener(''load'', function imgOnLoad() {
            resolve(this);
        });

        // When there''s an error during load, reject the promise
        imgElement.addEventListener(''error'', function imgOnError() {
            reject();
        })

        // Assign URL
        imgElement.src = url;

    });

    return imgPromise;
}

testImage("http://foo.com/bar.jpg").then(

    function fulfilled(img) {
        console.log(''That image is found and loaded'', img);
    },

    function rejected() {
        console.log(''That image was not found'');
    }

);

Answer 5

Puedes probar el siguiente código. No puedo garantizar la compatibilidad del navegador, así que tendrás que probar eso.

function testImage(URL) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=URL;
}

function imageFound() {
    alert(''That image is found and loaded'');
}

function imageNotFound() {
    alert(''That image was not found.'');
}

testImage("http://foo.com/bar.jpg");

¡Y mis simpatías por el jefe resistente a jQuery!

Answer 6

justo como a continuación:

var img = new Image(); 
img.src = imgUrl; 

if (!img.complete) {

//has picture
}
else //not{ 

}

Answer 7

/**
 * Tests image load.
 * @param {String} url
 * @returns {Promise}
 */
function testImageUrl(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.addEventListener(''load'', resolve);
    image.addEventListener(''error'', reject);
    image.src = url;
  });
}

return testImageUrl(imageUrl).then(function imageLoaded(e) {
  return imageUrl;
})
.catch(function imageFailed(e) {
  return defaultImageUrl;
});