Échec du chargement de la ressource sous Chrome

199

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

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

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

Impossible de charger la ressource

Ce problème n'apparaît que dans Chrome.

Qu'Est-ce que c'est?

AntonAL
la source
Pouvez-vous montrer du HTML? Nous avons besoin de plus d'informations pour vous aider avec votre problème.
Andre
1
La raison pour laquelle j'ai mis une prime pour cette question est qu'elle se produit de temps en temps et n'est pas uniquement liée aux images. Le site sur lequel je travaille fonctionne très bien dans Firefox et échoue parfois dans Chrome.
1
Comment avez-vous résolu le problème?
maks le
Vérifiez si les extensions Google Chrome bloquent les demandes.
Samuel Edson

Réponses:

290

J'ai récemment rencontré ce problème et j'ai découvert qu'il était causé par l'extension "Adblock" (ma meilleure supposition est que c'est parce que j'avais les mots "banner" et "ad" dans le nom de fichier).

Pour tester rapidement si c'est votre problème, démarrez Chrome en mode navigation privée 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 navigation privée, sauf si vous les avez spécifiquement configurées pour s'exécuter (via chrome://extensions).

couler
la source
2
Oui c'est ça! Le mien avait "Popup" dans le nom et cela causait le problème.
Janik Zikovsky
Merci. localhost site était bien, une fois sur une URL en direct, le problème est apparu, m'a fait réfléchir ..
Sam Doidge
1
Merci! J'ai passé plus de 30 minutes à essayer de comprendre pourquoi mon code ne fonctionnait pas dans Chrome.
heyomi
2
Merci de m'avoir sauvé. J'avais le mot "Annonce" dans mon URL. Quand j'ai enlevé, cela a fonctionné. Mais existe-t-il une solution de contournement pour cela? Je veux dire, je ne veux pas changer mon URL.
Amit le
2
J'ai aussi ce problème, mais je n'ai aucune extension installée et exécutant la dernière version, que faire?
TheCrazyProfessor
32

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

ismail
la source
2
@Cartman Je m'excuse pour mon ignorance. Qu'entendez-vous par onglet Réseau?
Faites un clic droit sur n'importe quel élément de la page, sélectionnez «Inspecter l'élément», cela ouvrira «l'inspecteur», l'inspecteur a beaucoup d'onglets pour déboguer la page Web, l'un d'eux est l'onglet «Réseau», cliquez dessus, rechargez la page et vérifiez pour toute erreur réseau.
ismail
@Cartman - Merci, j'utilise beaucoup l'inspecteur et je ne trouve pas l'onglet réseau. J'ai des éléments, des ressources, des scripts, un profil de chronologie, du stockage, des audits et une console. Je vais chercher sur Google et essayer de comprendre pourquoi je n'ai pas d'onglet de réseau.
1
J'utilise Chromium 10.0.xx.xx, assurez-vous d'utiliser un instantané récent.
ismail
@Cartman - Merci pour la pointe de chrome - n'était pas au courant de ce projet. Version installée 10.0.621.0 (70119). Ont recréé le problème. Le message dans l'onglet Réseau est de 16 demandes 0B transférées. La console indique: GET localhost: 51707 / Content / Theme.css undefined (undefined) Même pensé 20 secondes avant de le récupérer sans aucun problème.
17

Au cas où cela aiderait 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.

nuri
la source
Merci pour le tuyau, j'étais dans la même situation et je tirais les cheveux sur la raison
jasalguero
C'est ce qui m'est arrivé, Chrome n'a pas chargé les fichiers CSS à cause de l'extension AdBlock, lorsque j'ai annulé l'extension, tout fonctionnait bien.
Chani Poz
15

Il est également possible de désactiver le cache des ressources réseau. Cela peut être préférable pour le développement d'environnements.

  1. Chrome clic droit
  2. Aller à 'inspecter l'élément'
  3. Recherchez l'onglet «réseau» quelque part en haut. Cliquez dessus.
  4. Cochez la case «désactiver le cache».
john ktejik
la source
pourriez-vous vérifier cela une fois stackoverflow.com/questions/42693371/… @john ktejik
Yokesh Varadhan
Cela l'a fait pour moi.
JayJay123
Cela résout un problème particulier pour moi. Il ne le fait que pour les développeurs. Comment puis-je utiliser ces connaissances et les mettre en production afin que l'utilisateur ne rencontre plus ce problème. Cela signifie-t-il simplement que le clic qui me donne cette erreur devrait effacer le cache à chaque fois ou quelque chose du genre?
Stefano Martinengo le
Tu m'as sauvé beaucoup de temps. J'ai essayé votre écrou 1,2 et 4 pas 4. Maintenant, j'ai coché la case «désactiver le cache», il y a beaucoup de différences.
Bonjour
8

La solution de Kabir est correcte. L' URL de mon image était

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

et cela faisait trébucher AdBlock. Ce n'était pas un problème inter-domaines pour moi, et cela a échoué à la fois sur l'hôte local et sur le Web.

J'utilisais l'onglet réseau de Chrome pour déboguer et trouver des résultats très déroutants pour ces images spécifiques qui n'ont pas pu se charger. La première demande ne renverrait aucune réponse (Statut "(en attente)"). Plus tard, une deuxième demande a répertorié l'URL d'origine, puis «Rediriger» en tant qu'initiateur. Les en-têtes de demande de redirection concernaient tous cette ligne courte identique de données codées en base64, et chacun n'a renvoyé aucune réponse, bien que le statut soit "Réussi":

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

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

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

Enfin, je n'ai reçu aucun message "Échec du chargement de la ressource" 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 image.

De plus, à cause du CSS en ligne créé par AdBlock, la disposition de mon curseur de promotions était en train d'être supprimée. Bien que j'aie pu résoudre les problèmes de mise en page avec CSS avant de trouver la solution de Kabir, le CSS était quelque peu inutile et affectait la flexibilité du curseur pour gérer des images de plusieurs tailles.

Je suppose que la leçon est la suivante: faites attention à ce que vous nommez vos images. Ces images n'étaient ni malveillantes ni ennuyeuses autant qu'elles alertaient les visiteurs des promotions et offres spéciales en cours de manière discrète.

jmorganmartin
la source
Encore une raison pour laquelle adBlock ne devrait pas exister.
StephenKelzer
2
adBlock devrait exister et doit vivre
Coty Embry
7

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

bcolin
la source
4

J'obtenais cette erreur, uniquement dans Chrome (dernière version 24.0.1312.57 m), et uniquement si l'image était plus grande que le html img. J'utilisais un script php pour générer l'image comme ceci:

header('Content-Length: '.strlen($data));
header("Content-type: image/{$ext}");
echo base64_decode($data);

Je l'ai résolu en ajoutant 1 à la longueur de l'image:

header('Content-Length: '.strlen($data) + 1);
header("Content-type: image/{$ext}");
echo base64_decode($data);

Apparaît que Chrome ne s'attend pas au nombre correct d'octets.

Testé avec succès dans Chrome et IE 9. J'espère que cette aide.

Marcostrama
la source
Pareil ici. Dans mon cas, c'est Service Stack qui ajoute Content-Length lors de la sérialisation des objets mais pas un Stream ou Byte Array.
shex
Soudain, le "+1" dans la longueur du contenu commence à provoquer "Invalid Chunk Header" dans ma communication avec Tomcat (j'utilise php java bridge pour communiquer apache avec tomcat). J'ai supprimé ce "+1" et il est devenu pour fonctionner normalement dans Chrome. L'erreur avec le morceau a également disparu. Problème étrange ... Je ne comprends pas ce qui s'est passé.
marcostrama
4

Les faits:

Communauté
la source
3

Il existe une solution temporaire dans le support Reenable (temporaire) showModalDialog dans Chrome (pour Windows) 37+ .

Fondamentalement, créez une nouvelle chaîne dans le registre à

HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures

Sous la clé EnableDeprecatedWebPlatformFeatures, créez une valeur de chaîne avec le nom 1et une valeur de ShowModalDialog_EffectiveUntil20150430. Pour vérifier que la stratégie est activée, visitez chrome://policyURL.

Merlin051
la source
3

FYI - J'ai eu ce problème aussi et il s'est avéré que mon html listait le fichier .jpg avec un .JPG en majuscules, mais le fichier lui-même était en minuscule .jpg. Cela rendait bien localement et en utilisant Codekit, mais quand il était poussé sur le Web, il ne se chargeait pas. Changer simplement les noms de fichiers pour avoir une extension .jpg minuscule pour correspondre au html a fait l'affaire.

Tony Tambe
la source
Pour moi, c'était le problème :)
Clindo
2

Dans Chrome (Canary), j'ai décoché l'extension "Appspector". Cela a effacé l'erreur. entrez la description de l'image ici

MannyC
la source
1

J'ai mis à jour mon navigateur Chrome avec la dernière version et le problème a été résolu.

Sergiu
la source
1

Cela est dû au bloqueur de publicités.Lorsque les noms de fichiers de projet contiennent des mots tels que `` publicité '', les bloqueurs de publicités bloquent également le chargement de ces fichiers.

La meilleure solution est de ne jamais enregistrer de fichiers avec ces clés de nom.

GHULAM NABI
la source