Member Avatar for sam1

HI,

I have a html page that should display a .gif picture, it does show it with IE but i cant view it with mozzilla firefox.

Is there any option i can check in firefox or do i have to edit the html file?

thank you

  • 4 Contributors
  • 6 Replies
  • 192 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MattEvans

Dani AI

Generated

A broken-image X in Firefox simply means the browser failed to fetch the resource (not a rendering bug). , and were on the right track about path/protocol problems — here’s a concise, practical checklist and a couple of reliable fixes so the image loads the same way in all browsers.

The usual root causes: the img src points to a Windows filesystem path or a mismatched protocol (file vs http), Firefox enforces URL rules and security more strictly than IE, and a server-side filename case/permission mismatch will only show up once you move the files off Windows. To see the real error, open Firefox’s Developer Tools (F12) and check the Console and Network panels or right‑click the broken image and “Open Image in New Tab” — the status code or error message will tell you whether it’s “404 not found”, “blocked”, or a cross‑protocol failure.

Quick fixes to try now:

  • Put the HTML and image files inside the same project and reference the image with a project-relative URL (use forward slashes and avoid spaces in filenames).

  • For local testing, serve the folder over HTTP instead of opening files from disk. A very small, safe way to do that is to run a one-line local server (from the folder that contains your files):

    python -m http.server 8000

    then open in the browser. That avoids mixed file/http protocol issues and behaves like a real web server.

  • If the Network panel shows 404, fix the path; if it shows “blocked” or “mixed content” check the protocol/permissions; if the issue appears only after upload, check filename case and server file permissions.

Final notes: Ctrl+F5 (hard refresh) clears caching quirks; Firefox’s Page Info → Media list is handy to inspect exactly which URLs the page tried to load. These steps will make the behavior consistent across browsers and prevent the IE-only “tolerance” from hiding real problems.

Recommended Answers

All 6 Replies

Member Avatar for Member #117553

HI,

I have a html page that should display a .gif picture, it does show it with IE but i cant view it with mozzilla firefox.

Is there any option i can check in firefox or do i have to edit the html file?

thank you

Normally it is the other way arround :D.
Are you sure you've inserted the image correctly?
Check your paths and whether the image was not cached in IE cache.

Member Avatar for sam1

i have checked it three times now. it is fine with IE but not firefox. it gives me a blank space for the image with a "x" sign at the top right....:-|

Member Avatar for Member #117553

i have checked it three times now. it is fine with IE but not firefox. it gives me a blank space for the image with a "x" sign at the top right....:-|

My friend,

If you have empty space with red cross - this means that the path is wrong, or image name is wrong, or something like that, so FF cannot find the image.

1. Check your path once again.
2. Check image name - there should be no spaces. Use underscore instead.

Member Avatar for sam1

thanks for your reply.

I checked the path and image name, but still doesnt help. if the path or image was wrong how come it loads it using IE.
this is what i got for the image tag:

<img src="C:\webroot\images\logo.gif" width="650" height="110">

ps. sorry about my earlier post i get broken picture sign when loading it with firefox.

Member Avatar for MidiMagic

Try opening it with the "open file" entry in the File menu of Firefox.

The trouble is probably that you are addressing a path on your own computer.

I didn't know you could put a DOS/Windows path in the src attribute. Maybe the trouble is that IE allows that, but Firefox doesn't.

Subdirectories and folders normally use forward slashes in internet addressing, not backslashes.

The correct url is:

src="/webroot/images/logo.gif"
Member Avatar for MattEvans

if you want to link to a local file as the image; use the 'file' protocol explicitly:

<img src="file:///C:\webroot\images\logo.gif" width="650" height="110">

maybe those (\) should be the other way round; so if it doesn't work like that; try:

<img src="file:///C:/webroot/images/logo.gif" width="650" height="110">

Also, check out:

It loads without in IE because IE perhaps 'expects' windows/DOS paths.. It's not a correct URL though; because unless an URL is relative or root-relative; it has to have a protocol specified.

Putting an url like this src="/webroot/images/logo.gif" will work; but it's deceptive because it's root-relative to a local drive; wheras on the web; it'll be root relative to a 'home' or 'My Documents' folder (depending on the server OS, and may be different); with a document root folder inside.

That is; if/when you put your page online; it's likely that the document root folder will be at the level of 'webroot', so your url will end up "/images/logo.gif". On the server; the root-absolute path "/images" may end up pointing to a folder like; "/home/sam1/htdocs/images" (if you're on a linux server running apache); and that might be accessible from the web as : "http://www.sam1.com/images". However; the URL: "file:///c:\anything" is only accessible on your computer.

You can get around that by making ALL links relative (i.e: if your page is in a folder "C:\webroot\stuff\index.html"; and the image is in the folder "C:\webroot\images\logo.gif"; make the src="../images/logo.gif") but; that can get reaaaally difficult to manage. Or, upload your images to where you want them to be on the web, and use an HTTP protocol url i.e. "http://www.sam1.com/images/logo.gif". If you don't do something like that; and you make everything absolute with reference to your filesystem; you'll have to go and change all your links when you come to upload your site to the server.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.