Failed to load resource under Chrome

There is a bunch of images in a web page.

Other browsers do download them correctly, but Chrome doesn't.

In the developer's console, it shows the following message for each image:

> Failed to load resource

As mentioned before, problem appears only in Chrome.

What is it?

I recently ran into this problem and discovered that it was caused by the "Adblock" extension (my best guess is that it's because I had the words "banner" and "ad" in the filename).

As a quick test to see if that's your problem, start Chrome in incognito mode with extensions disabled (ctrl+shift+n) and see if your page works now. Note that by default all extensions will be already disabled in incognito mode unless you've specifically set them to run (via chrome://extensions).

Check the network tab to see if Chrome failed to download any resource file.

In case it helps anyone, I had this exact same problem and discovered that it was caused by the "Do Not Track Plus" Chrome Extension (version 2.0.8). When I disabled that extension, the image loaded without error.

There is also the option of turning off the cache for network resources. This might be best for developing environments.

1. Right-click chrome
2. Go to 'inspect element'
3. Look for the 'network' tab somewhere at the top. Click it.
4. Check the 'disable cache' checkbox.

Kabir's solution is correct. My image URL was

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

and this was tripping up AdBlock. This wasn't a cross-domain issue for me, and it failed on both localhost and on the web.

I was using Chrome's network tab to debug and finding very confusing results for these specific images that failed to load. The first request would return no response (Status "(pending)"). Later down the line, there was a second request that listed the original URL and then "Redirect" as the Initiator. The redirect request headers were all for this identical short line of base64-encoded data, and each returned no response, although the status was "Successful":

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

Later I noticed that these inline styles were added to all the image elements:

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

Finally, I did not receive any "failed to load resource" messages in the console, but rather this:

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

If any of these things is happening to you, it probably has something to do with AdBlock. Turn it off and/or rename your image files.

Also, because of the inline CSS created by AdBlock, the layout of my promotions slider was being thrown off. While I was able to fix the layout issues with CSS before finding Kabir's solution, the CSS was somewhat unnecessary and affected the flexibility of the slider to handle images of multiple sizes.

I guess the lesson is: Be careful what you name your images. These images weren't malicious or annoying as much as they were alerting visitors to current promotions and specials in an unobtrusive way.

If the images are generated via an ASP Response.Write(), make sure you don't call Response.Close();. Chrome doesn't like it.

I was getting this error, only in Chrome (last version 24.0.1312.57 m), and only if the image was larger than the html img. I was using a php script to output the image like this:

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

I resolved it adding 1 to the lenght of the image:

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

Appears that Chrome dont expect the correct number of bytes.

Tested with sucess in Chrome and IE 9. Hope this help.

Facts:

• I have disabled all plugins, and the problem still remains.

• There are some sites, where the problem does not occour.

• It's a known issue. See Issue 424599: Failed to load resource: net::ERR_CACHE_MISS error when opening DevTools on PHP pages and Stack Overflow question Bizarre Error in Chrome Developer Console - Failed to load resource: net::ERR_CACHE_MISS.

There is a temporary work around in Reenable (temporary) showModalDialog support in Chrome (for Windows) 37+.

Basically, create a new string in the registry at

HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures

Under the EnableDeprecatedWebPlatformFeatures key, create a string value with the name 1 and a value of ShowModalDialog_EffectiveUntil20150430. To verify that the policy is enabled, visit chrome://policy URL.

FYI - I had this issue as well and it turned out that my html listed the .jpg file with a .JPG in caps, but the file itself was lowercase .jpg. That rendered fine locally and using Codekit, but when it was pushed to the web it wouldn't load. Simply changing the file names to have a lowercase .jpg extension to match the html did the trick.

In Chrome (Canary) I unchecked "Appspector" extension. That cleared the error.

I updated my Chrome browser to the latest version and the issue was fixed.

It is due to ad-blocker.When project files names contains words like 'ad' then ad-blockers also block theses files to load.

Best solution is that never save any files with these name keys.