Images wont load locally

So I’m really beating my head against a wall here.

I had an image load in the past from my local computer but now it seems no matter what I do I can no longer load an image from my local hard drive. I can load an image from online but for some reason the browser can not find an image from my local computer and display it so the link is broken.

I have tried several different images. Ones that I have found online and ones I took myself. I have had the image in the same folder as the Index.html and in a sub folder titled images. However no matter what I do the image is always displayed as broken and not found.

I hope someone can help me figure this out. I have absolutly no idea why I can not display an image locally. The pathing should be correct but somehow it still doesnt display.

Try ./images/file.png
Also, its .jpg not .jpeg :wink:

Yeah I tried all of you suggestions but none of them worked.
I tried both Jpg and jpeg both in upper and lower and neither worked as well. I even renamed the image folder 2 and the image 2.jpeg just to make sure it wasn’t a spelling error and still it cant find the image.

Can you right click the “broken image icon” and click something like open in new tab? Then you can check the “URL” and compare that with the actual path.

This is the mystery, it goes to the right path;

file:///C:/Users/msygin/Documents/Coding/learning/FCC/Tributepage/red-scarf.jpg [I moved different photos in, this is one I put in the same folder as the .html file]
but for some reason it just says the file has been moved or deleted. It does this with every local photo.

Is it the exact same path as when you open the image with chrome? Or doesn’t that work?

Nope it works if I drag and drop the image into chrome. It follows the image path just fine and opens it.

file:///C:/Users/msygin/Documents/Coding/learning/FCC/Tributepage/red-scarf.JPG.JPG

I have no idea why it cant find it when I load it through HTML. Again here is my code:

<!DOCTYPE html>
<html>
<head>
	<title>Freddie</title>
</head>
<body>

 <H1>FREDDIE MERCURY</H1>
<img src="red-scarf.JPG">

</body>
</html>

So it should direct it right to the image [note; the image is not in a seperate folder right now as I dont want a possible pathing issue, so to just rule that out I put the images in the same folder as the .html.]

<!DOCTYPE html>
<html>
<head>
	<title>Freddie</title>
</head>
<body>

 <H1>FREDDIE MERCURY</H1>
<img src="red-scarf.JPG">

</body>
</html>

See, it didnt even show up here.

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Oh okay thank you.!!

I see double .JPG in the path, have you tried that in your code?

2 Likes

HOLY SHIT THAT WORKED
GOD! YOU ARE A LIFE SAVER!

Seriously, that tripped me up so bad for two days now!

I’m also experiencing the same thing, please how were you able to resolve the issue?