Images not showing up in Github-CodePudding

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 >
    <img  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  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 >
    <div >
      <img src="Hana profile-modified.PNG" alt="Hana Profile">
      <h2 >Hello.</h2>
      <p >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 >
    <div >
      <h2 >My Skills.</h2>

      <div >
        <img  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 >
        <img  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>

CodePudding user response：

Solution

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/My/Path/To/Folder/picture.png

...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 , 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).

CodePudding user response：

The images you are trying to use with src= are on your local machine, when the website is loading its trying to access C:/Users/hanah.. but that doesnt exist on the sites server, thats the path of them on your own computer, try uploading the images with the site in their own folder and link them as "./images/seagull.png" or to imgur or online storage and link to them that way