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?
Réponses:
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).
Vérifiez 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'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.
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.
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.
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.
Les faits:
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.
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.
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.
