Échec du chargement de la ressource sous Chrome
Il y a un tas d'images dans une page Web.
D'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 apparaît uniquement dans Chrome.
Qu'Est-ce que c'est?
J'ai récemment rencontré ce problème et découvert que cela était dû à l'extension "Adblock" (ma meilleure hypothèse est que c'est parce que j'avais les mots "banner" et "ad" dans le nom du fichier).
Pour tester rapidement si tel 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).
Consultez l'onglet Réseau pour voir si Chrome n'a pas réussi à télécharger un fichier de ressources.
Au cas où cela aiderait quelqu'un, j'avais exactement le même problème et j'ai découvert qu'il était causé par l'extension "Ne pas suivre plus" Chrome (version 2.0.8). Lorsque j'ai désactivé cette extension, l'image s'est chargée sans erreur.
Il est également possible de désactiver le cache pour les ressources réseau. Cela pourrait être mieux pour les environnements en développement.
- Clic droit chrome
- Aller à 'inspecter l'élément'
- Recherchez l'onglet "réseau" quelque part en haut. Cliquez dessus.
- Cochez la case "désactiver le cache".
La solution de Kabir est correcte. Mon image URL é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 localhost et sur le Web.
J'utilisais l'onglet Réseau de Chrome pour déboguer et trouver des résultats très confus pour ces images spécifiques dont le chargement a échoué. La première demande ne renverrait aucune réponse (Status "(en attente)"). Plus tard dans la ligne, 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 ne renvoyaient aucune réponse, bien que l'état soit "Succès":
GET data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg== HTTP/1.1
Plus tard, j'ai remarqué que ces styles intégrés étaient 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 "Impossible de charger 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, en raison de l'inline CSS créé par AdBlock, la présentation de mon curseur de promotions a été supprimée. Bien que je sois capable de 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 pas méchantes ni ennuyantes, car elles alertaient les visiteurs des promotions et des promotions en cours de manière discrète.
Si les images sont générées via un ASP Response.Write(), assurez-vous de ne pas appeler Response.Close();. Chrome ne l'aime pas.
Je recevais cette erreur, uniquement dans Chrome (dernière version en date du 24.0.1312.57 m), et uniquement si l'image était plus grande que l'image html. J'utilisais un script php pour afficher 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 n'attend pas le nombre d'octets correct.
Testé avec succès dans Chrome et IE 9. J'espère que cela vous aidera.
FYI - J'ai eu ce problème aussi et il s'est avéré que mon code HTML listait le fichier .jpg avec un .JPG en majuscule, mais que le fichier lui-même était en minuscule .jpg. Cela a bien fonctionné localement et avec Codekit, mais quand il a été poussé sur le Web, il ne s'est pas chargé. Changer les noms de fichiers pour avoir une extension .jpg en minuscule pour correspondre au code HTML a fait l'affaire.
Il existe une solution temporaire dans support de showModalDialog réactivé (temporaire) 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 1 et une valeur de ShowModalDialog_EffectiveUntil20150430. Pour vérifier que la stratégie est activée, visitez la page chrome://policy URL.
Faits:
- J'ai désactivé tous les plugins et le problème persiste.
- Il y a certains sites, où le problème ne se pose pas.
- C'est un problème connu. See Problème 424599: Échec du chargement de la ressource: erreur net :: ERR_CACHE_MISS lors de l'ouverture de DevTools sur des pages PHP et question de débordement de pile Erreur bizarre dans Chrome Console du développeur - Échec du chargement de la ressource: net :: ERR_CACHE_MISS.
Dans Chrome (Canary), j'ai décoché l'extension "Appspector". Cela a effacé l'erreur. 
J'ai mis à jour mon navigateur Chrome vers la dernière version et le problème a été résolu.