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?

[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!

[jarbelix]

My public repo (https://github.com/Tiozao-do-Linux/glpi-nginx) isn't showing all the images either.

The most intriguing thing is that some appear and others don't.