The profile image; odd extra coding

The profile image in my beginners website is not showing. I use the inspect element to look at the code and something odd is happening. image code

If you look at the code there is this extra code that i think is breaking the link “::before”. I think this is what’s causing the problem but i can’t fix it on my end. Could you please lend me a hand with this.

Best regards
Edgar Morillon

Hello @EAMorillon, welcome to the GitHub Support Community!

It appears to be capitalization issue. Your images reside in the Images folder (uppercase i), however, you’re referencing the images folder (lowercase i) which does not exist in your repo. The directory and file names are case-sensitive on GitHub’s servers, so the issue can be fixed in two ways:

  1. rename the folder from Images --> images
  2. or change the src from images/Edgar.jpg --> Images/Edgar.jpg

If you’re using Windows 10 @tajmone posted a solution for enabling case-sensitive behavior for files/folders, which you may want to check out. This way you can simulate how files/folders on GitHub’s servers work, and catch issues like these before pushing your changes to GitHub.

The ::before you saw is a CSS pseudo-element and shouldn’t interfere with external resources. I’m assuming it’s simply added by your devtools, because Chrome’s (on my end) does not display it.

Nice. I’ll make the change. I appreciate the help.

1 Like