HTML image Tag and Firefox are now friends

I have seen a lot of these questions on the web

• Images not being displayed in Firefox
• Images on local folders are not loading in Firefox
• Image tags <img> don't work on Firefox
• Images from local folders are displaying on IE and Chrome but not on Firefox and Safari
• Firebug error: Failed to load given URL (usually an image)

I too ran into this while building a webpage. I had this simple code in my HTML file but the image won't load.

<div id="logo">
<img src="C:\xampp\htdocs\HelloNB\images\templatecompanylogo.gif" />
</div>

Why images don't load?

Due to security reasons Firefox prevents images from loading on your webpage. This restriction is on images stored in the local folder and most developers have faced this issue.

How did I solve this issue?

First off, I hit the Google road. Found a couple of suggestions from couple of people. Well, I took those few simple steps and was convinced that I was heading towards the solution. It took these for the images to appear.

I defined the source (src) property of the image (<img>) element as src="file:\\c:\< path-to-your-image-file >". (Notice the file:\\)

Like, the above code was altered and re-written as

<div id="logo">
<img src="file:\\C:\xampp\htdocs\HelloNB\images\templatecompanylogo.gif" />
</div>

For many out there, this would be it. This would work. If it doesn't, I really don't have to instruct you your next move :)

Install NoScript extension for Firefox. Navigate to Tools > Add-ons > Extensions > NoScript > Options > Advanced > Trusted > Check "Allow Local Links"

The images must now appear on your page. In case they still don't appear ................. :)

Right-click the image (un-displayed image) on your webpage, select NoScript and select "Allow http://localhost".

This worked for me and I hope this has helped you as well. If however, you had another workaround to this issue, please leave a comment or a link to the website that sourced you and thank you for doing that.