'Images not showing up in Github

I'm trying to upload my website in GitHub but the images won't show. I've tried a lot of the solutions posted here (changing path, changing png to PNG..) but nothing works?



<body>
  <div class="top-container">
    <img class="top-bird" src="C:/Users/hanah/OneDrive/Desktop/Web Development/CSS-My Site/seagull.png" alt="bird">
    <h1>I'm Hana</h1>
    <h2>A programmer</h2>
    <img class="bottom-bird" src="C:/Users/hanah/OneDrive/Desktop/Web Development/CSS-My Site/seagull.png" alt="bird">
    <img src="C:/Users/hanah/OneDrive/Desktop/Web Development/CSS-My Site/mountain.png" alt="mountain">

  </div>
  <div class="middle-container">
    <div class="profile">
      <img src="Hana profile-modified.PNG" alt="Hana Profile">
      <h2 class="hello2">Hello.</h2>
      <p class="hello">My name is Hana and I'm currently studying to become a Web Developer. I graduated in 2020 from UC Riverside with a Bachelor's in Art. I have always been interested in digital design and tech in general so I'm purusing HTML, CSS
        and
        Javascript at the moment and plan to learn other coding languages like Python and Java. In my free time I enjoy reading, art, and music.</p>
    </div>
    <hr class="hr">
    <div class="skills">
      <h2 class="myskills">My Skills.</h2>

      <div class="skill-row">
        <img class="art" src="C:/Users/hanah/OneDrive/Desktop/Web Development/CSS-My Site/art.png">
        <h3>Web Development</h3>
        <p>I love designing and coding websites for users to enjoy and am excited to expand my skill set.</p>
      </div>
      <div class="skill-row">
        <img class="web" src="C:/Users/hanah/OneDrive/Desktop/Web Development/CSS-My Site/coding.png" alt="art">
        <h3>Art</h3>
        <p>Whether it is digital design or traditional art, I enjoy it all and am eager to learn more.</p>
      

</body>

</html>
javascripthtmlcss


Solution 1:[1]

You need to use relative paths, not full paths.

This is because you are asking GitHub to access the full path, which does not exist on their server. So change this:

C:/Users/Administrator/Documents/Coding/Project/picture.png

Changed the path!

To this:

picture.png

Also, as a bonus tip, you should avoid spaces in file and folder names whenever possible. You can replace spaces with _ and/or - by convention.

However, if you can't remove the spaces, you should replace them with %20, which stands simply as a space in URL encoding!

NOTE: This solution is assuming that the images are in the deployed folder. If they are not, then make a new folder (like images), and link it to your HTML by adding a relative path like before (e.g. /images/picture.png).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions