Member Avatar for expertotech

hello everyone, i have a new pc and it runs on windows 7, and i never had this problem with my other xp pc, everytime i create an html file with images (i have tried jpeg, gif and png so far) only png shows up and not jpg and gif, i need to solve this problem, i have tried to disable my security software and still nothing happned, this happens to both firefox and ie 8. is anyone experiencing the same problem? have you found a solution? what could be causing this? please help, i cant go on webdesigning without it

Edited by expertotech because: n/a
  • 5 Contributors
  • 17 Replies
  • 597 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by expertotech

Dani AI

Generated

Short summary and root cause (quick): modern browsers prevent web pages served from a network origin from silently pulling arbitrary files off the local disk for security. That mismatch of "where the page came from" versus "where the images live" is the most common reason an image shows as a broken icon in some browsers but appears in others. As diagnosed, the problem was an origin/path issue; 's Compatibility Mode simply relaxed IE8's behavior for that case, and ultimately confirmed the local-file workaround solved the immediate problem.

What to check (diagnostics):

  • Open the browser's Developer Tools (F12) and look at the Console and Network tabs for the failing image request. Note response codes (404/403), MIME, or explicit security warnings — those point to path, permission, or origin-blocking issues.
  • Try opening the image file directly in the browser (drag the file into a tab). If it displays, the file itself is fine and the problem is how the page references it.
  • If serving pages from a local/remote HTTP server, check server logs for the image request and confirm filename spelling and case (remote hosts may be case-sensitive).

Practical fixes (recommended workflow):

  • Keep images inside the project folder and reference them with paths relative to the HTML file so the same links work on the development machine and on the web server.

  • Develop using a simple local HTTP server so requests mimic production. For example, from the project folder a quick Python 3 server can be started with:

    python -m http.server 8000

    Start it from the site folder and open the address the server prints in the browser; this removes cross-origin/local-file complications while testing.

  • After uploading to a live host, verify the browser Network tab shows successful 200 responses and correct Content-Type headers for images.

Why PNG vs JPG/GIF differences can appear: inconsistent testing methods (some images opened from disk, some served), browser caching, or different paths used for different files. The Network/Console information will show which case applies. For long-term work, follow 's advice: use relative paths and a local dev server to avoid these platform/security quirks.

Recommended Answers

All 17 Replies

Member Avatar for Atli

Hey.

How exactly are you adding these images to your HTML?
What are the file paths you are using?

I can't imagine that this has much to do with the OS itself. More likely something like an extremely over-protective AntiVirus, broken browser plugins, or just a typo in the HTML.

Member Avatar for feranm_ie8team

When in IE8, have you tried enabling the Compatibility Mode (broken page icon next to the refresh button)? That may help.

Feran
Internet Explorer Outreach Team

Member Avatar for userr

how change icon

Member Avatar for Atli

When in IE8, have you tried enabling the Compatibility Mode (broken page icon next to the refresh button)? That may help.

Feran
Internet Explorer Outreach Team

If that does fix the problem, there is almost definitely something wrong with your HTML.

Try running it through the W3C Markup Validation Service and fix whatever problems it reports.

By the way, are you opening your HTML page via a HTTP server, or are you just opening them of your hard-drive?
If it is the former, this could well be a configuration problem in your HTTP server.

Member Avatar for expertotech

When in IE8, have you tried enabling the Compatibility Mode (broken page icon next to the refresh button)? That may help.

Feran
Internet Explorer Outreach Team

yea, it solved the prob in ie8!!! but what about firefox? its still not showing up in firefox, (its being replaced by a broken page too, but i dont think firefox has compatibility feature mode) how do i fix this with firefox? and why is it only not showing jpg and gif with the offline html? it shows all image types on the internet..

Member Avatar for Atli

yea, it solved the prob in ie8!!! but what about firefox? its still not showing up in firefox, (its being replaced by a broken page too, but i dont think firefox has compatibility feature mode) how do i fix this with firefox? and why is it only not showing jpg and gif with the offline html? it shows all image types on the internet..

Hey.

Like I say; it could be a problem with your HTML.
Internet Explorer renders HTML and CSS incorrectly, thus; invalid HTML/CSS will sometimes work in IE whereas it will not work in browsers that render it as it should be rendered. (Firefox, for example.)

IE8 is *more* standards compliant then IE7 was, which would explain why it doesn't show the broken markup like IE7 did.

Show us the HTML, and CSS if you use that. Maybe we can spot the problem.
Even if it is not a problem with the code itself, we might be able to spot the actual problem.

Edited by Atli because: Clarifying.
Member Avatar for expertotech

ok here's my code, i made it simple but still wont show the jpg

<HTML>
<HEAD>

</HEAD>


<BODY bgcolor="#0080CF" marginwidth="0" marginheight="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">

<img src="C:\Users\SonnyDajAlexa\Desktop\test\smiley.jpg" alt="test" border="0" >


</BODY>
</HTML>

the path is correct from my local drive...

Member Avatar for Atli

Ahh ok.

In the past, you could have achieved this by doing src="file:///C:/path/to/file.ext" .
By default, browsers use the HTTP protocol to fetch files, and from their point of view, asking for src="C:/Users/..." is the same as asking for src="" .
So you need to tell the browser you want a local file, and you do that by adding file:/// in front.

However, this is no longer allowed, as it poses a security threat. (See the next post also!)
Trying it in Firefox 3.5 gives you a "broken-image" icon and an error message in the log:

Security Error: Content at  may not load or link to file:///C:/Users/Atli/Desktop/test/smiley.jpg

And even tho IE doesn't give you any indication of a security issue, I am assuming it blocks the images for the same reason.

What you need to do is use a relative path.
By which I mean; place the images in a folder close to the HTML file and use a source like src="images/myImage.jpg" , where the folder structure looks like:

test/
    htmlfile.html
    images/
        myImage.jpg
Edited by Atli because: Clarifying.
Member Avatar for Atli

As an afterthought...
The previous post was written assuming you were using a HTTP server, and using a URI like: http://localhost/file.html

The file:/// paths should work fine if you open the HTML file directly from the hard-drive, like: file:///C:/webroot/file.html
The security risk I was talking about doesn't apply to files opened in this manner. (As far I as I know, at least.)

Member Avatar for cohen

Are you trying to do this locally on the computer? as in trying to view the image or
Are you trying to view this page on a web server?

What i do is in the folder where all the HTML files are, i have another folder called "images" with all the site images in there.

Then i would go into dreamweaver (which is what i use to edit my site) and then map to the image. If you have it working properly, you shouldn't need any of the C:\Users etc

If you need help with this, i can help you. I can do it for you if you would like.

Member Avatar for feranm_ie8team

Great, expertotech, I'm glad you got it fixed in IE8!

Member Avatar for expertotech

As an afterthought...
The previous post was written assuming you were using a HTTP server, and using a URI like: http://localhost/file.html

The file:/// paths should work fine if you open the HTML file directly from the hard-drive, like: file:///C:/webroot/file.html
The security risk I was talking about doesn't apply to files opened in this manner. (As far I as I know, at least.)

that makes sense Atli, ill try that as soon as i get home, im currently out of town with my xp laptop so i cant test it, hope it works...

Member Avatar for expertotech

Are you trying to do this locally on the computer? as in trying to view the image or
Are you trying to view this page on a web server?

What i do is in the folder where all the HTML files are, i have another folder called "images" with all the site images in there.

Then i would go into dreamweaver (which is what i use to edit my site) and then map to the image. If you have it working properly, you shouldn't need any of the C:\Users etc

If you need help with this, i can help you. I can do it for you if you would like.

yea, thanks cohen ill try that too as soon as i get home, as i am out of town with the xp laptop, (by the way, i create webpage using notepad, but im planning to learn dreamweaver soon)
...wow a lot of responses i am beginning to like Daniweb...

Member Avatar for expertotech

Great, expertotech, I'm glad you got it fixed in IE8!

yea, thanks a bunch feranm_ie8team! im new to windows 7 and ie8...

to everyone, my point of doing the img code locally is to check how it looks like while editing it before uploading it to the http server as im using notepad to create a page ...

Member Avatar for feranm_ie8team

Please let me know if you have any questions or run into any other issues in the future....

Member Avatar for Atli

(by the way, i create webpage using notepad, but im planning to learn dreamweaver soon)

I recommend you try instead. It's awesome for web-design and completely free.

Dreamweaver is pretty good, but not worth it in my opinion. Not when there are free alternatives that are just as good.

to everyone, my point of doing the img code locally is to check how it looks like while editing it before uploading it to the http server as im using notepad to create a page ...

If you don't want to install a complete IDE, try . It's just as light-weight as the regular Notepad, but has a lot of nice features that help when coding, like highlighting and code-folding.

And if you plan on testing your designs on your PC, you could install a local HTTP server, so you can created your pages for the internet instead of messing around with this local file mess.
Check out , or just the stand-alone Apache. Both are pretty easy to use.
(I'd be happy to guide you through it if you want.)

Member Avatar for expertotech

As an afterthought...
The previous post was written assuming you were using a HTTP server, and using a URI like: http://localhost/file.html

The file:/// paths should work fine if you open the HTML file directly from the hard-drive, like: file:///C:/webroot/file.html
The security risk I was talking about doesn't apply to files opened in this manner. (As far I as I know, at least.)

Hey everyone im back and guess what solved the prob...
these 8 characters: file:///

youre the man Atli! and youre probably right, it may be a security "glitch" with windows 7 as opposed to when i use the old code (without the "file:\\\") in xp.
i will marked this solved now.

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.