En mi opinión, estoy mostrando una imagen:

<img src="https://some-host/img1.jpg" onerror="showNoPhotoIcon(this);">

He definido la función showNoPhotoIcon en un archivo separado llamado common.js

/*========== when image is not available ==========*/
function showNoPhotoIcon(image) {
    image.onerror = "";
    image.src = '/images/no-photo-icon.jpg'
    return true;
}

Estoy haciendo referencia a common.js desde mi punto de vista, la siguiente línea está en la parte inferior de mi punto de vista (página html)

<script src="/Scripts/app/common.js"></script>

Pero la función no es accesible desde la vista, cuando falta la imagen, el código intenta llamar a la función showNoPhotoIcon y aparece el siguiente error:

Error de referencia no capturado: showNoPhotoIcon no está definido

Actualización1:

Después de recibir el error, traté de confirmar que la función está definida o no => lo es.

enter image description here

Actualización2:

Esto parece ser un problema de tiempo, porque a veces funciona y otras no.

0
Hooman Bahreini 25 sep. 2019 a las 01:35

3 respuestas

La mejor respuesta

Descubrí que tener el código del controlador cargado en un JS externo en la parte inferior del elemento del cuerpo hace que el manejo del error sea inconsistente, pero ahí es donde quieres el código JS, con lo que estoy de acuerdo, así que ...

Una manera de hacer que el manejo de errores sea consistente es el siguiente

Primero, no use el atributo onerror

<img src="https://some-host/img1.jpg" alt="" />

En segundo lugar, cambie su showNoPhotoIcon de la siguiente manera, ya que se llamará con un evento de error como argumento; esto hace que removeEventListener sea fácil

function showNoPhotoIcon(e) {
    const image = e.target;
    image.removeEventListener('error', showNoPhotoIcon);
    image.src = '/images/no-photo-icon.jpg'
}

Agregue este código en common.js

document.querySelectorAll('img').forEach(img => {
    if (img.naturalWidth === 0) {
        img.addEventListener('error', showNoPhotoIcon);
        img.src = img.src;
    }
});

Esto verifica si el ancho de la imagen es 0, de ser así, la "recarga" después de adjuntar un controlador de errores

En mi opinión, es un poco hacky, también podría suponer que si el ancho es 0 la imagen no existe, pero, como las redes son redes, nunca se sabe, al menos de esta manera creo que está seguro de encontrar y "arreglar" "todas las imágenes rotas

1
Jaromanda X 24 sep. 2019 a las 23:11

La respuesta aceptada explica el problema de que el controlador de errores no se carga cuando ocurre el error.

En mi caso, cambié el controlador para usar js en línea:

<img src="https://some-host/img1.jpg" onError="this.onerror=null; this.src='/images/no-photo-icon.jpg';"
0
Hooman Bahreini 24 sep. 2019 a las 23:50

Su código se ve bien, tal vez sea la url en su etiqueta script. Intente ejecutar su función en la misma página html para verificar dos veces. No veo ninguna razón para configurar image.onerror = ""; y return true;

La mejor manera debería ser aplicar un detector de eventos a la imagen, o imágenes, para que no tenga que escribir la función en la etiqueta html.

document.querySelectorAll('img').forEach(image =>{
     image.addEventListener('error', (e) =>{
          // load the placeholder image
     });
});
-1
Marcos Rivas 24 sep. 2019 a las 23:06