Firefox wont load images on my site
I have a super odd issue where firefox will not load images on my site and I cannot for the life of me understand why!!
I am using firefox 50.0.2 on win 10 64 bit. I have removed all add ons, cleared all cache, force reloaded and nothing seems to work. The site displays completely fine in Edge, Chrome, and Opera.
A public URL for the site is https://contributorbeta.imagesource.com
In the page header at the very top left of the page firefox displays the title / text instead of the logo. It says "IS Contributor Portal" The same issue can be seen throughout the page.
If you right click the header text where the logo should be and inspect the element, when hovering over the src of the image tag the firefox console reports that the image could not be loaded. However, if you right click the text again and copy the image location then open a new tab and paste the location the image can be loaded.
If you edit the source code using the inspector, you can add a dot '.' to the front of the URL and press enter and the image will show up. You can then remove the dot and press enter and the image will stay so there is no problem with the referencing I can see.
I have tried turning off hardware acceleration to no avail. I have also tried on two different installs of firefox 50.0.2.
Thanks, Kevin
Modified by Kevinio04
All Replies (11)
I've noticed this problem recently on multiple 32-bit OSs too. It appears to be random for me. I have noticed it mostly on image-intensive sites. I've noticed it when testing (web design) too, almost if it takes the browser a few tries to actually read the most recent content.
Allow / Block Images Type: permissions.default.image Its values are; 1) Allow all images to load, regardless of origin 2) Block all images from loading. 3) Prevent third-party images from loading.
Hi Kevin, this site is hard to debug because it is all built using JavaScript. Over a megabyte of JavaScript.
According to the Network Monitor, Firefox is not even requesting Logo.png. (Curiously, it is requesting LogoBlack.png, but I don't see that being used in the page.)
Something about the way the script is assembling the page seems to be incompatible with Firefox 50, but this is a debugging job for someone immersed in these libraries, not me.
Could you try the site in a some previous versions of Firefox to see whether you can isolate the version where the problem started? (Assuming it is a newer problem.) I suggest using these "Portable" builds for that, unless you prefer to create VMs:
Portable builds install into a folder and run using a fresh local profile so they do not cross-contaminate with your regular Firefox install.
Hi everyone, thanks for your input thus far.
Jeff, as you thought it appears that this is a problem with just the current build of firefox. I tested versions 46, 47, 48 and 49 from your list and the site functions as expected in each of them so something has changed within FF it would seem.
The site is a large ish JS application - hence the over a MB of script. Site uses RequireJS, knockoutJS, JQuery and bootstrap as the core components of the site. and as the site is in debug mode the JS is not minified before deployment to help me debug so it's larger than it would be in release mode.
All of these libraries appear to be functioning as expected as, aside from these images, the page renders and no JS errors are reported. I tried removing all other components aside from the above and my routing engine - crossroadsJS - with no joy.
Im certainly no JS expert and all the images on the page are currently hard coded - i.e. the src attribute is defined in HTML and not built or modified in JS. As such if the browser can load the HTML it should be able to load the images.
The underlying problem it seems is that the browser is not even requesting the images but I have literally no idea why or even where you would start with this - if it works in previous versions of FF and all other current browsers i've tested, and nothing has changed on my side in terms of the plugin versions etc etc.
Perhaps you should report this as a bug.
https://bugzilla.mozilla.org/ See Bugzilla etiquette before commenting in bug reports.
Possibly this problem: https://www.fxsitecompat.com/en-CA/docs/2016/img-in-template-or-button-is-not-loaded-properly/
Firefox 50.1.0 is expected before the end of the year.
Thanks all, I have also created the bug on bugzilla just in case there is a different problem but it seems like the template issue could certainly be the cause. The HTML is delivered via knockout templates / components.
Thankfully the application is not ready for production yet and so hopefully this problem is resolved with the next release.
That bug seems like a fairly large one to let through into a production browser - considering templates are commonly used these days, especially with SPA apps etc.
Sorry, that article may be in error and the fix will be in Firefox 51, due out January 24, 2017.
You can update to Firefox 50.1.0 via "Help > About" to get the latest security fixes.
Note that this has been fixed in the current Firefox 51.0beta release (tested and works for me).
- Bug 1323126 - Firefox wont load / doesnt request images on my site
- Bug 1317901 - Cloned images from <template> do not load. (fixed)
Thank you everyone for your swift and useful help. You have probably saved me many needless hours of searching google / my code for an issue I was not going to be able to fix.
Thankfully for us our application is not due for release until Q2 2017 so an early Q1 release of the Firefox 51 public release that resolves this issue is great news.
I will mark this as solved / closed once tested on the final non beta release of Firefox 51
Modified by Kevinio04