Broken images #21960
-
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 |
Beta Was this translation helpful? Give feedback.
Replies: 13 comments
-
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 :
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. |
Beta Was this translation helpful? Give feedback.
-
Hey @sethclydesdale, That worked! Thanks a mil! |
Beta Was this translation helpful? Give feedback.
-
i had tried adding …/ but its look nothing have changed link :- https://iweyouclasses.github.io/core/topics/String.html |
Beta Was this translation helpful? Give feedback.
-
I had a similar issue myself, where the images would work on localhost but not on Github 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. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Thanks , This solved my issue with images in GitHub pages, I was using …/img while html file in the same directory. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Hi Everyone! I am having ussues trying to get my image to show on my live page. The image shows up completely fine on y local file but is broken when I publish. Ive chedked the code so many times and can’t figure it out. A fresh pair of eyes would be great! THanks! Link to code: daniellacornide.github.io/final.html at main · daniellacornide/daniellacornide.github.io · GitHub |
Beta Was this translation helpful? Give feedback.
-
Capitalization is different. The
daniellacornide/daniellacornide.github.io/blob/c3ad5642b298108fc10403c1790bc2b51a745502/final.html#L26
|
Beta Was this translation helpful? Give feedback.
-
I changed it but that didnt seem to work. Not sure what else it could be |
Beta Was this translation helpful? Give feedback.
-
What doesn’t work? The picture seems to load, though a wall doesn’t fit the alt text. 😅 |
Beta Was this translation helpful? Give feedback.
-
daniellacornide:
this is from the link you provided,
this is from your updated
meaning it’s not reflected on |
Beta Was this translation helpful? Give feedback.
-
I am struggling with this problem. I think I use the right path. Could someone take a look for me? |
Beta Was this translation helpful? Give feedback.
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 :
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.