Er staat een heleboel afbeeldingen op een webpagina.
Andere browsers downloaden ze wel correct, maar Chrome niet.
In de ontwikkelaarsconsole wordt het volgende bericht weergegeven voor elke afbeelding:
Kan bron niet laden
Zoals eerder vermeld, verschijnt het probleem alleen in Chrome.
Wat is het?
Antwoord 1, autoriteit 100%
Ik kwam onlangs dit probleem tegen en ontdekte dat het werd veroorzaakt door de extensie “Adblock” (mijn beste gok is dat dit komt omdat ik de woorden “banner” en “ad” in de bestandsnaam had).
Als een snelle test om te zien of dat uw probleem is, start u Chrome in de incognitomodus met extensies uitgeschakeld (ctrl+shift+n) en kijk of uw pagina nu werkt. Houd er rekening mee dat alle extensies standaard al zijn uitgeschakeld in de incognitomodus, tenzij u ze specifiek hebt ingesteld om te worden uitgevoerd (via chrome://extensions).
Antwoord 2, autoriteit 11%
Controleer het netwerktabblad om te zien of Chrome geen bronbestand kan downloaden.
Antwoord 3, autoriteit 6%
Voor het geval iemand er iets aan heeft, ik had exact hetzelfde probleem en ontdekte dat het werd veroorzaakt door de Chrome-extensie “Do Not Track Plus” (versie 2.0.8). Toen ik die extensie uitschakelde, laadde de afbeelding zonder fouten.
Antwoord 4, autoriteit 6%
Er is ook de mogelijkheid om de cache voor netwerkbronnen uit te schakelen. Dit is misschien het beste voor ontwikkelomgevingen.
- Klik met de rechtermuisknop op chrome
- Ga naar ‘element inspecteren’
- Zoek ergens bovenaan het tabblad ‘netwerk’. Klik erop.
- Vink het selectievakje ‘cache uitschakelen’ aan.
Antwoord 5, autoriteit 3%
Kabir’s oplossing is correct. Mijn afbeelding URLwas
/images/ads/homepage/small-banners01.png,
En dit struikelde adblock. Dit was geen kwestie voor cross-domein voor mij, en het mislukte op zowel localhost als op het web.
Ik gebruikte het tabblad Netwerk van Chrome om te debuggen en het vinden van zeer verwarrende resultaten voor deze specifieke afbeeldingen die niet laden. Het eerste verzoek zou geen reactie (status “(in behandeling)” retourneren). Later in de lijn, was er een tweede verzoek dat de originele URL vermeldde en vervolgens “omleiden” als initiator. De kopers van de omleidingsaanvraag waren allemaal voor deze identieke korte lijn van base64-gecodeerde gegevens en elk heeft geen antwoord geretourneerd, hoewel de status “succesvol” was:
GET data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg== HTTP/1.1
Later merkte ik dat deze inline-stijlen werden toegevoegd aan alle beeldelementen:
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
Ten slotte ontving ik geen “mislukt om resource” -berichten in de console te laden, maar dit:
Port error: Could not establish connection. Receiving end does not exist.
Als een van deze dingen met u gebeurt, heeft het waarschijnlijk iets te maken met adblock. Schakel het uit en / of hernoem uw afbeeldingsbestanden.
Ook vanwege de inline CSS gecreëerd door AdBlock, de lay-out van mijn promoties schuif was weggegooid worden. Terwijl ik de lay-outproblemen met CSS kon oplossen voordat ik de oplossing van Kabir vind, was de CSS enigszins onnodig en beïnvloedde de flexibiliteit van de schuifregelaar om afbeeldingen van meerdere maten te verwerken.
Ik denk dat de les is: wees voorzichtig met de naam van je afbeeldingen. Deze afbeeldingen waren niet kwaadaardig of irritant, maar ze waren bezoekers op een onopvallende manier attent op actuele promoties en specials.
Antwoord 6, autoriteit 2%
Als de afbeeldingen worden gegenereerd via een ASP Response.Write(), zorg er dan voor dat u Response.Close();niet aanroept. Chrome vindt het niet leuk.
Antwoord 7
Ik kreeg deze foutmelding, alleen in Chrome (laatste versie 24.0.1312.57 m), en alleen als de afbeelding groter was dan de html-img. Ik gebruikte een php-script om de afbeelding als volgt uit te voeren:
header('Content-Length: '.strlen($data));
header("Content-type: image/{$ext}");
echo base64_decode($data);
Ik heb het opgelost door 1 toe te voegen aan de lengte van de afbeelding:
header('Content-Length: '.strlen($data) + 1);
header("Content-type: image/{$ext}");
echo base64_decode($data);
Het lijkt erop dat Chrome niet het juiste aantal bytes verwacht.
Met succes getest in Chrome en IE 9. Hoop dat dit helpt.
Antwoord 8
Feiten:
- Ik heb alle plug-ins uitgeschakeld en het probleem blijft bestaan.
- Er zijn enkele sites waar het probleem zich niet voordoet.
- Het is een bekend probleem. Zie Probleem 424599: kan bron niet laden: net::ERR_CACHE_MISS fout bij het openen van DevTools op PHP-pagina’sen Stack Overflow-vraag Bizarre fout in Chrome Developer Console – Mislukt om bron te laden: net::ERR_CACHE_MISS.
Antwoord 9
Er is een tijdelijke oplossing in (tijdelijke) showModalDialog-ondersteuning opnieuw inschakelen in Chrome (voor Windows) 37+.
Maak in principe een nieuwe string in het register op
HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures
Maak onder de sleutel EnableDeprecatedWebPlatformFeatures een tekenreekswaarde met de naam 1en een waarde van ShowModalDialog_EffectiveUntil20150430. Ga naar chrome://policyURL om te controleren of het beleid is ingeschakeld.
Antwoord 10
Ter info – ik had dit probleem ook en het bleek dat mijn html het .jpg-bestand vermeldde met een .JPG in hoofdletters, maar het bestand zelf was .jpg in kleine letters. Dat werd lokaal goed weergegeven en met Codekit, maar toen het naar het web werd gepusht, laadde het niet. Door simpelweg de bestandsnamen te wijzigen om een kleine .jpg-extensie te hebben die overeenkomt met de html, was de truc voldoende.
Antwoord 11
In Chrome (Canary) heb ik de “Appspector”-extensie uitgeschakeld. Dat heeft de fout verholpen.
Antwoord 12
Ik heb mijn Chrome-browser geüpdatet naar de nieuwste versie en het probleem is verholpen.
Antwoord 13
Het komt door ad-blocker. Als de namen van projectbestanden woorden als ‘ad’ bevatten, dan blokkeren adblockers ook deze bestanden om te laden.
De beste oplossing is om nooit bestanden met deze naamsleutels op te slaan.