Échec du chargement de la ressource sous Chrome

Question

Il y a un tas d'images dans une page web.

Les autres navigateurs les téléchargent correctement, mais Chrome ne le fait pas.

Dans la console du développeur, il affiche le message suivant pour chaque image :

Échec du chargement de la ressource

Comme mentionné précédemment, le problème n'apparaît que dans Chrome.

Qu'est-ce que c'est ?

Answer 1

J'ai récemment rencontré ce problème et j'ai découvert qu'il était causé par l'extension "Adblock" (mon hypothèse la plus probable est que c'est parce que j'avais les mots "banner" et "ad" dans le nom du fichier).

En guise de test rapide pour voir si c'est votre problème, lancez Chrome en mode "incognito" avec les extensions désactivées ( ctrl + shift + n ) et voyez si votre page fonctionne maintenant. Notez que par défaut, toutes les extensions seront déjà désactivées en mode incognito, à moins que vous ne les ayez spécifiquement configurées pour être exécutées (via chrome://extensions ).

Answer 2

Vérifiez l'onglet réseau pour voir si Chrome n'a pas réussi à télécharger un fichier de ressources.

Answer 3

Si cela peut aider quelqu'un, j'ai eu exactement le même problème et j'ai découvert qu'il était causé par l'extension Chrome "Do Not Track Plus" (version 2.0.8). Lorsque j'ai désactivé cette extension, l'image s'est chargée sans erreur.

Answer 4

La solution de Kabir est correcte. Mon image URL était

/images/ads/homepage/small-banners01.png, 

et c'est ce qui a déclenché AdBlock. Ce n'était pas un problème de domaine croisé pour moi, et cela a échoué à la fois sur localhost et sur le web.

J'ai utilisé l'onglet réseau de Chrome pour déboguer et j'ai trouvé des résultats très confus pour ces images spécifiques qui ne se chargeaient pas. La première demande ne renvoie aucune réponse (statut "(pending)"). Plus tard, une deuxième demande indiquait l'URL d'origine, puis "Redirect" comme initiateur. Les en-têtes de demande de redirection concernaient tous cette courte ligne identique de données codées en base64, et chacune d'entre elles ne renvoyait aucune réponse, bien que le statut soit "Successful" :

GET      data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg== HTTP/1.1

Plus tard, j'ai remarqué que ces styles en ligne étaient ajoutés à tous les éléments de l'image :

    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

Enfin, je n'ai pas reçu de message "failed to load resource" dans la console, mais plutôt ceci :

Port error: Could not establish connection. Receiving end does not exist.

Si l'une de ces choses vous arrive, cela a probablement quelque chose à voir avec AdBlock. Désactivez-le et/ou renommez vos fichiers d'images.

De plus, en raison de la présence d'une CSS créé par AdBlock, la mise en page de mon curseur de promotions était perturbée. Avant de trouver la solution de Kabir, j'ai pu résoudre les problèmes de mise en page à l'aide d'une feuille de style en cascade (CSS), mais cette dernière était quelque peu superflue et nuisait à la flexibilité du curseur, qui pouvait gérer des images de tailles différentes.

La leçon à tirer est la suivante : faites attention au nom que vous donnez à vos images. Ces images n'étaient pas malveillantes ou ennuyeuses, mais elles alertaient les visiteurs sur les promotions et les offres spéciales en cours, de manière discrète.

Answer 5

Si les images sont générées via un ASP Response.Write() assurez-vous que vous n'appelez pas Response.Close(); . Chrome n'aime pas ça.