Broken images

Hi Guys,

It is first time here and I need immediate help.

I am a newbie coder and I have just recently completed my portfolio. When I first deployed my portfolio on github pages everything worked well and images for my project section were showing but during my last commit the images are now showing as broken. I am using VS code and when I launch the live server the images are showing fine. 

here is a snippet:

image on the right is viewing the projects page with live server and the left is thru gitbhub pages.

If you must check my code to check the problem. here is the repo: https://github.com/eatcodesforlife/portfolio 

Hi @eatcodesforlife,

It looks like the issue is the two dots plus the slash "…/"at the beginning of your images’ src attributes. This is basically a reference to a folder up one directory from /portfolio/ – it refers to the root of your github pages (https://eatcodesforlife.github.io/) in this case. Since projects.html is in the same directory as /img, you can refer to it like this :

src="img/flexbox.jpg"

 I’m not sure what the result would be on your live server, but you can open the devtools and hover the src to see where it’s getting the images from, like in the example above, if there’s any issues on your end.

8 Likes

Hey @sethclydesdale,

That worked! Thanks a mil!

2 Likes

Capture1.PNG

i had tried adding …/  but its look nothing have changed

link :-  https://iweyouclasses.github.io/core/topics/String.html

I had a similar issue myself, where the images would work on localhost but not on Github pages. 
I tried to prefix URLs with … but it broke the links on localhost so I didn’t pushed it to the gh pages. 

Interestingly I noticed that the extension of the image was in captial letters PNG whereas path was provided in small letters png. I didn’t had any issues on the localhost but messed up on gh pages which is weirdish. 

So I altered the image extension from PNG to png and it worked for that problem.

2 Likes

Same as mine, in the localhost is JPG but I type jpg (no capital) is Ok, but in github it’s must be in capital. Thanks for the suggestion.

1 Like

Thanks , This solved my issue with images in GitHub pages, I was using …/img while html file in the same directory.

I was struggling with the same problem this morning. Images were displaying on local host, but not it GitHub page, so I’m really grateful for this discussion. In my case images in the images folder had lower case ext .jpg, but for some reason I had the capital JPG in the index.html. Worked perfectly on the local host, but GitHub pages didn’t load the images. All fixed now. Thanks again to everyone in this discussion.