GitHub images not showing

[apamanes]

Select Topic Area

Question

Body

Hello everybody! This is my first time in the community. My question involves more than Pages so I may do some errors but I'll try to be clear and let me know if I should redirect my question. Recently in GitHub, I've been trying to upload files I've been working on in Visual Studio Code. This is for a Coursera course on doing a first basic website. I've been adding images, links, text, and everything to make sure I was meeting all the requirements of the project. Once I completed that, I was ready to host my site. I created a repository with my name, uploaded some html files including the project one, and I set all the necessary settings including making my site live and deploying from a main branch with docs.

My files took one or two days to finally work. The main site is not the READMe one with the "Hi there" words https://apamanes.github.io/apamanes/ , but the Final Project one(I tried renaming it to Index because I thought it'd be easier for GitHub). All other files did work as well once you copy the address https://apamanes.github.io/apamanes/myFirstPage.html. However, in the project link the images are still not showing. I found this videohttps://www.youtube.com/watch?v=K942H-5MW4w&t=836s to solve that issue. Before continuing, I realized that the the guy in the video had a function in VsCode that changes made there could be automatically done in GitHub. This could have saved me time as I don't need to make individual changes to both GitHub and VsCode. So, I saw a feature in VsCode to connect to GitHub (I didn't take a screenshot), and after hitting commit, all my files automatically were loading to something. I put my GitHub username and email in the terminal as required, but my files were taking so long that I cancelled them. Now all my files are either green or yellow as staged or modified, and it also created a new repository in GitHub but with no files. I guess my question is... what should be the best way to make the images be seen? Should I put the images folder in GitHub, or find an extension to make my work in VScode be in Sync with Git Hub and follow a more ordered process?

[gpl-gowthamchand]

Hey @apamanes,

I had a look at your repo and screenshot. Since you renamed FinalProject_Type1.html to index.html, GitHub Pages should now serve that as the main page. Just make sure:

• The file is exactly named index.html (case-sensitive).
• It’s in the root of your repo (not inside another folder).
• Pages is enabled in your repo settings, with the branch set to main and folder set to /root.

After that, give it a few minutes to update, then refresh your site link. If you still see the README page, it’s likely caching - try a hard refresh or open it in an incognito window.

Looks like you’re on the right track - once those settings line up, your site should load the HTML file properly.

[apamanes]

Yeah, I tried renaming the index back to Final Project file, but now the address with the original name has a 404 error (I don't know if it is underscore sensitive), and the main file is still is project one.

[apamanes]

I'm going to try renaming it back to Index. But following that process you say will get my files to show the README page as the main page and the rest of the files will show themselves once I type the address, including the project one?

[Aqib121201]

Check image paths
Make sure image files are in the repository and pushed to GitHub
Use relative paths in your html not local file paths
Pay attention to filename case on GitHub. picture.png is different from Picture.png
Confirm GitHub Pages settings
If Pages is set to deploy from docs folder make sure the images are inside docs or the path points into docs
If you want a file named index use index.html in the deployed folder so the site root works
Verify commits and push
Open your repo folder in a terminal and run these commands
git status
git add .
git commit -m "add images and fix paths"
git remote -v
If git remote is missing or points to the wrong repo add or set it
git remote add origin https://github.com/yourusername/yourrepo.git
git push -u origin main
If your default branch is called main and your repo uses main replace with main or use master if that is your branch name
If a new empty repo was created on GitHub
Go to the new repo page on GitHub copy the remote url and run the git remote add or set-url command above then push
After push confirm on GitHub that image files appear in the repo tree and that the image URLs shown by clicking a file open in the browser
Hard refresh and cache
Open the page and press Ctrl Shift R or Cmd Shift R to bypass cache
If images still not showing
Open one image file in the GitHub web UI and copy its raw path then paste into a browser to confirm it loads
If that raw path works but the site still fails double check your html path and Pages deploy folder
If you want I can draft the exact commits and remote commands for your repo names and branch names
if you find this solution helpfull upvote this and please follow me it boost my confidence

[cu-sanjay]

@apamanes

Checked your site: https://apamanes.github.io/apamanes/.
The main page loads and your HTML content is visible.

Issues and fixes

1) Images not showing

Reason: the images/ folder is not in your repository.
Fix: upload the image files into the repo (create an images folder) and use relative paths in your HTML.

From:

<img src="/Users/apamanes/Desktop/ImagesWebsite/Winton.jpeg">

To:

<img src="images/Winton.jpeg" alt="Winton">

2) Opening other pages

Link to other HTML files with normal anchor tags:

<a href="myFirstPage.html">Go to My First Page</a>
<a href="indexAlex.html">Visit Alex's Page</a>
<a href="mySecondNewPage.html">Check Second Page</a>

Or open directly in the browser:

• https://apamanes.github.io/apamanes/myFirstPage.html
• https://apamanes.github.io/apamanes/indexAlex.html
• https://apamanes.github.io/apamanes/mySecondNewPage.html

3) GitHub Pages index file

GitHub Pages serves index.html from the folder you set in the Pages settings (root or /docs). Confirm branch and folder in your repository settings so the correct index.html is used.

Hope this clears your doubt. If you still face any issue, ask here - the community is ready to help.

[apamanes]

So you're saying that I should put the folder where I'm keeping the images in my GitHub repository and then link them with relative paths. I was thinking on doing that, but the thing is if I do that, then my original VsCode files in my computer will be unchanged, only the GitHub files in my repo shall be edited and I have nothing that makes both my computer and GitHub linked together. I mean it works but it'll be weird if I do, or are you telling me to do this on my computer locally and then pass it to GitHub? Then what way should I link it? The anchor tags do seem link a good idea. I want to clear this issue so I can upload another file that will be my final hand-in for the coursera class I'm doing with no problem.

[apamanes]

The images worked. Thank you!