à mon avis, je montre une image:
<script src="/Scripts/app/common.js"></script>
3 Réponses :
Votre code a l'air bien, peut-être est l'URL de votre script Le meilleur moyen doit être d'appliquer un auditeur d'événements à l'image , ou des images, vous n'avez donc pas à écrire la fonction dans la balise HTML. P> script code>. Essayez d'exécuter votre fonction dans la même page HTML à vérifier. Je ne vois aucune raison de définir image.onerror = ""; code> et retour vrai; code> document.querySelectorAll('img').forEach(image =>{
image.addEventListener('error', (e) =>{
// load the placeholder image
});
});
a) onerror n'est pas un événement correct pour AddeventListener, et B) qui ne fonctionnera pas de manière cohérente car l'événement d'erreur aurait pu tirer avant que le JavaScript soit même chargé.
J'ai trouvé avoir le code de gestionnaire chargé dans un JS externe au bas de l'élément corporel fait la manipulation des erreurs incompatibles - mais c'est là que vous voulez un code JS, que je suis d'accord avec ...
un moyen de rendre la manipulation des erreurs cohérente est la suivante p>
Premièrement, n'utilisez pas ONERRRE Attribut P>
document.querySelectorAll('img').forEach(img => {
if (img.naturalWidth === 0) {
img.addEventListener('error', showNoPhotoIcon);
img.src = img.src;
}
});
"J'ai trouvé que le code du gestionnaire chargé dans un JS externe au bas de l'élément corporel fait le traitement des erreurs incompatibles" .. Merci pour cela, il explique le problème ... Pouvez-vous partager tout lien que vous avez trouvé trouvé à ce sujet s'il vous plaît?
@HoomAnBahreiniq - Non, car c'est juste une observation basée sur mon expérience, rien que j'ai étudié: p
Merci encore, j'ai trouvé un commentaire sur Cette réponse par PRESTUL qui dit la même chose sur le gestionnaire d'erreurs.
@Hoomanbahreini - ouais, dommage que la question et les réponses étaient basées sur jQuery: D
Personnellement, je pense que l'utilisation de JS en ligne pour la manipulation est une meilleure solution, sa plus courte et plus facile à comprendre. J'apprécie votre réponse, car cela souligne la cause de l'erreur.
La réponse acceptée explique le problème qui est le gestionnaire d'erreur ne pas être chargé lorsque l'erreur se produit.
Dans mon cas, j'ai changé le gestionnaire pour utiliser en ligne JS: P>
<img src="https://some-host/img1.jpg" onError="this.onerror=null; this.src='/images/no-photo-icon.jpg';"
Votre code essaie probablement d'appeler
montréophotoiicon dans le code ci-dessus où vous chargez common.jsUtilisez un auditeur d'événement à la place? Plutôt que de mettre le JS à l'intérieur d'un attribut?
@Jaromandax: Oui, je crois que ... mais on m'a dit qu'il est préférable d'ajouter tous les fichiers CSS sur les fichiers HTML et .js au fond ...
@EvolutionXBox - Un auditeur d'événements ne peut pas nécessairement être ajouté à temps pour gérer l'événement d'erreur
@Jaromandax aw Poo ... Et si elle est créée lors d'un événement de page, comme Dom Ready?
@HOOMANBAHRIEINI - J'ai essayé de maigrir le code avec le gestionnaire au bas de la page, et il a toujours géré l'erreur - êtes-vous sûr que
montrédophotoiicon est dans le contexte global? Accédez à la console du navigateur et tapezconsole.log ("montréOntoicon")@EvolutionXBox - Cela m'a surpris!
Ok, donc c'est défini dans le contexte global - mon code "factice" était évidemment imparfait
@Jaromandax: Merci, mais la console.log ("showphotoicon") dit: non défini? Est-il possible que je perds une liaison à la liaison car je mette à jour l'image à l'aide d'Ajax?
non, la console.log je vous ai dit de faire était incorrect
console.log (indiquée) - Sans les citations ... ou simplement tapermontrédophotoiicon