Github pages' images not working

[amagalla1394]

I am still new to github pages overall and started playing with some items by creating an item through VScode CLI.
I have read online that GitHub pages is case sensitive and even after double-checking everything and even uploading the images directly into the repo, the images still do not display.

any help?

URL: amagalla1394/odin-recipe-git-test: The Odin Project Recipes project (github.com)

the page itself is also up

[Gisgar3]

Hi there, welcome to the GitHub Support Community! The reason the images on your GitHub Pages site will not display is because you’re trying to call to the photos in a directory that does not exist. For example, in lasagna.html, you’re trying to call to /images/lasagna.html, which does not exist within the folder that lasagna.html is located in. In order to fix this, just create an image folder in the same directory that lasagna.html is located in, then put your image within that image folder.

Hope this helps!

[alaina96]

Hey I know this is an old discussion, but I am having the same issues as OP and I've tried every suggestion in this thread. I can't figure out why the images won't load.

[Gisgar3]

@alaina96 Can you go more in depth about your project's file-structure and the errors you're receiving?

[alaina96]

Live site
Respository

I have uploaded two photos for this project and I have tried removing them from the image folder, creating a new image folder, and have tried adding . in front of the the /

[manel118]

please i need your help with this , i tried everything but still not showing the images .. pleas take a look , the bpreblem i guess is in script.js where is pass the object info to inner html in drawItems() function.

https://github.com/manel118/BeautyShop

[Abunnasarmomin]

Awesome i tried this. And it is working. Thanks for your Help

[amagalla1394]

I get that putting the images in the same directory would work much easier but isn’t it better practice to add images to a folder/directory of its own?
I currently have both items in different directories but what i’m confused about is how the path is wrong?

if I am calling an image from lasagna.html for example… wouldn’t the image source path be ./images/lasagna.png ? or even add odin-recipe-git-test before the path?

let me know if that makes sense or if i am missing something.

thank you

[Gisgar3]

You should be able to call back to the parent directory so you can pull the images from there. I’d say that’s good practice. Looking at your repository now, the reason the images won’t display is because there’s no period at the start of the specified path. Instead of:
<img src="/images/lasagna.png" alt="lasagna">
use
<img src="./images/lasagna.png" alt="lasagna">

I tested it on my end and it fixed the issue. Hope this helps out!

[WDWaleed]

Thank you so much @Reuben20. I've run into this "image path" problem so many times. I had to specify absolute URLs for some of my projects because the relative URLs never worked and the frustrating thing about absolute URLs was that I couldn't work on my local repo the same way I would have liked to but this fixed that problem.

Thanks again. You're a lifesaver

[dnahol]

This worked! Thank you so much!

[supunrathnayake007]

omg, i wasted lot of time doing nonsense. its confusing when it works fine in local environment.
Thank you so much.

[codingwithkushal]

brother you are a live saver

[omrojas]

Oh man. That feels good.

[amagalla1394]

I appreciate your help.
it helped me better understand paths through CLI interaction as well, so it was all around really helpful.

Thank you

[randomswords]

You can also use the image's link from GitHub as the source.

[amagalla1394]

i did however end up placing the images in the same directory too though. i might test it later the other way

[ElenaOhana]

It solved the same problem I had and it looks like a very logical solution. 🧠 Thank you 🤝

[hafizafiz]

thank you 2

[steinarodds]

For me what worked was adding master to the start of the path "master/assets/images/" Since my branch was configured as Master

[bell-kevin]

I think I'm having a similar issue, but I can't get my picture to show up.

https://bellkevin.me/

bell-kevin/Kevin-Bell#4

[iamnexxed]

Have been facing the same issue recently

[bell-kevin]

I fixed it!

[bell-kevin]

https://raw.githubusercontent.com/bell-kevin/Kevin-Bell/main/README.md

[Siddharthbadal]

same issue. Images are not showing up in readme. have tried everything. images can't open images in the image folder of any repo. it keeps loading.

[yongxiChuang]

I have changed the code <img src="./images/_MG_3799.JPG" alt="My test image" width = 300>
but why can't the image show up?
https://github.com/yongxiChuang/cc.github.io.git
https://yongxichuang.github.io/cc.github.io/

And I go to the website looking for the DevTools, it shows up that there's no image folder in the source.
Please help me...

[MarczanHub]

Try by removing './ ' before "images/" in image source. It actually worked for me.

[pankajpuri]

https://github.com/pankajpuri/portfolio/tree/main/public/assests/images

images are stored : public/assests/images/pankajpuri.jpg

https://github.com/pankajpuri/portfolio/blob/main/src/components/profileSection.jsx
in profileSection.jsx

Hi there, I have got react app. I deployed with gh-pages but I am unable to fetch images.
I would really appreciate if anyone can help. Thank you.

[gitwendley]

On Sat, Jun 10, 2023 at 1:12 AM Jane ***@***.***> wrote: Github pages expect you to have an assets folder inside docs folder like this docs/assets/ and add all your images thereGithub pages use jekyll so it need to have the assets folder for images. Also jekyll can load markdown content so if you select the root path it can load your readme.md instead of looking for an index.html — Reply to this email directly, view it on GitHub <#23086 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A5EQBP6NZEF75AECI2YSAUDXKP65BANCNFSM57GVNGVQ> . You are receiving this because you are subscribed to this thread.

i always create a file names Image but sometimes it’s work and sometimes he doesn’t work

…

Message ID: <community/community/repo-discussions/23086/comments/6138403@ github.com>

[karthik4dev]

i can't see any images in any github pages . Is there any problem with my computer ? i tried with chrome and edge ☹️

[WDWaleed]

It depends on how you're specifying urls and file paths and if you're using Vite.
If you're using Vanilla JS, HTML and CSS, then specify absolute file paths like this. /images/the_img.png

The slash means that the path starts from the root directory so you need to keep the images folder at the top level and then fetch images from there. If you're using VS Code, then it's intellisense will automatically help you out a bit.

For Vite, the process is different. If you need help with that then let me know.

[submagr]

One thing I realized is that the files stored as git-lfs does not work with github pages (see this issue). I was storing my images and video files as git-lfs.

Untracking the files from git lfs and adding them as regular files worked for me.

[BigYajuu]

I have read the whole discussion and other relevant articles and I still can't get my image to work on gh-pages. I use Parcel as a bundler for my website and I dynamically append images with jQuery/TS.

My website is now live: https://bigyajuu.github.io/my-portfolio/ and the images just would not show. I opened Inspect Element and the first thing I saw was the errors from the console: GET https://bigyajuu.github.io/img/works/<literally any images>.png 404 (Not Found). But the img/ folder IS in my gh-pages branch.

Incidentally, I found these error images are using the wrong URLs. From the Network tab of F12 menu you can see all these images lack the root folder my-portfolio/, which is the name of my repo and also the root path for my public website.

[V-Rezende]

Hey Martin, did you fix the issue with your images?
Would you be happy to share how do fix it?
Thanks

[BigYajuu]

Hey Martin, did you fix the issue with your images? Would you be happy to share how do fix it? Thanks

Ok. The problem I faced has something to do with the root of image paths.

When hosting on your gh-pages you need to make sure the root is / instead of ./, depending on your directory.

Inspect your error image files via Network tab of F12. Select your images and check the URLs. If done correctly, your path should include the entire gh-pages URL as root. e.g. https://someone.github.io/repo/, not https://someone.github.io/.

Here is a duplicate on a StackOverflow query page I made: https://stackoverflow.com/questions/77624516/gh-page-hosting-parcel-v2-built-project-contains-static-image-assets-that-would.

[BigYajuu]

And quite a hassle that is as the reason it took me so long to find out the solution was that I did not turn on tsc watch when I repeatedly edited my Typescript code, causing a lot of void attempts.

[youyoumu]

/img/... doesn't work.
img/... works.

[supriya101]

Yes, it's working. Thank You

[skmirajulislam]

umm 😟

[ruhail12]

Good post but I was wondering if you could write a litte more on this subject? I’d be very thankful if you could elaborate a little bit further. Appreciate it! skup samochodów dostawczych śląsk