Hi all I am having issue with one of my repositories https://github.inkcoo.com/Mitch3012/johnmitchelldev.dev

[Mitch3012]

🏷️ Discussion Type

Bug

Body

When I load it locally on my system it works but on git hub pages it does not display the email and git hub images any ideas why that is?

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[DavidVH83]

Hi @Mitch3012, this is a common hurdle when moving from a local environment to GitHub Pages. Since it works locally but not online, the issue is likely related to how the server handles file paths.

Here are the most likely causes and how to fix them:

1. Case Sensitivity
   Local environments (especially Windows) are often case-insensitive, but GitHub Pages (Linux) is case-sensitive.
   The Problem: If your file is named Header.PNG but your code refers to header.png, it will fail online.
   The Fix: Ensure the filename and the code reference match exactly, including capital letters.

2. Relative vs. Absolute Paths
   The Problem: Using a leading slash like /images/photo.png tells the browser to look at the root of the domain (mitch3012.github.io/), skipping your repository folder.
   The Fix: Use relative paths by removing the leading slash: images/photo.png or ./images/photo.png.

3. File Extensions
   The Problem: Sometimes we mix up .jpg and .jpeg, or .png and .PNG.
   The Fix: Double-check that the extension in your code matches the actual file extension in your repository.

4. How to Debug (The "Console" Method)
   To see exactly what is going wrong:

5. Open your live GitHub Pages site.

6. Right-click anywhere and select Inspect, then go to the Console tab.

7. Look for red 404 (Not Found) errors. These errors will show you the exact path the browser is trying to find. This usually makes it obvious where the path is breaking.

I hope this helps you get your site up and running!

[LegedsDaD]

This is a very common issue when moving a project from a local environment to GitHub Pages. Based on your repository structure, the problem is almost certainly due to file paths or case sensitivity.

Here are the two most likely causes and how to fix them:

Cause 1: Incorrect File Paths (The "Leading Slash" Issue)

This is the most common reason. If you are using absolute paths that start with a forward slash / in your img tags, they will fail on GitHub Pages if your repository is a "Project Page" (which yours is, since it's not named username.github.io).

The Problem: On your local computer, a path like /emailicon.jpg might look in your project's root folder. On GitHub Pages, the URL of your site is https://mitch3012.github.io/johnmitchelldev.dev/. A path starting with / tells the browser to look at the very top level (https://mitch3012.github.io/emailicon.jpg), which does not exist.

The Fix: Change your img tags in index.html to use relative paths.
In your index.html, change this:

<!-- Bad (Absolute Path) -->
<img src="/emailicon.jpg" alt="Email">
<img src="/GitHubicon.jpg" alt="GitHub">

To this:

<!-- Good (Relative Path - looks in the same folder) -->
<img src="emailicon.jpg" alt="Email">
<img src="./GitHubicon.jpg" alt="GitHub">

Cause 2: Case Sensitivity

GitHub Pages runs on a Linux server, which is case-sensitive. If you are developing on Windows, your file system is likely case-insensitive, meaning EmailIcon.jpg and emailicon.jpg are treated as the same file. On GitHub, they are completely different files.

The Problem: I can see your files in the repository are named GitHubicon.jpg (Capital G, i) and emailicon.jpg (lowercase). If your HTML code references them differently (e.g., src="githubicon.jpg"), it will work on Windows but break on GitHub.

The Fix: Ensure the capitalization in your HTML src attribute exactly matches the filename in your repository.
Check your filenames in the repository vs your HTML:

Repo file: GitHubicon.jpg ➡️ HTML should be: src="GitHubicon.jpg"
Repo file: emailicon.jpg ➡️ HTML should be: src="emailicon.jpg"

How to verify the exact error

To confirm which of these is the problem:

1.Open your website on GitHub Pages.Right-click the broken image and select Inspect (or press F12 to open Developer Tools).
2.Go to the Console tab. You will likely see 404 Not Found errors for the images.Look at the URL in the error:If it says ...github.io/emailicon.jpg (missing the repo name), you have Cause 1.
3.If the capitalization looks different from your file list, you have Cause 2.

Summary of what to do:

Open your index.html and ensure your image tags look like this (assuming the images are in the same folder as index.html):

<!-- Make sure the name matches the file exactly -->
<a href="mailto:your@email.com">
    <img src="emailicon.jpg" alt="Email Icon">
</a>

<a href="https://github.inkcoo.com/Mitch3012">
    <img src="GitHubicon.jpg" alt="GitHub Icon">
</a>

If You Find this helpful, do mark this as the answer , hope your issue gets solved soon.

[gauravsinghal166]

Hi @Mitch3012
This is usually caused by GitHub Pages serving files differently from your local environment.

You will check the few things to solve this issue:

1. GitHub Pages is case-sensitive.
2. Make sure your image paths match the exact filename casing.
3. Verify the assets are actually deployed or not because sometimes images work locally because they exist on your machine but were not committed to Git.