Images not showing up in Github

114
February 20, 2022, at 12:00 PM

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>
Answer 1
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 %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).

Answer 2

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

Rent Charter Buses Company
READ ALSO
Different scroll speeds for elements in array

Different scroll speeds for elements in array

I have different randomly-styled stars in an array and I would like them to each have different scroll speeds between -2 and -

194
Centering a table header

Centering a table header

I'm having issues centering a single table headerBelow is the tablea snapshot of the table Im trying to center Its header

131
Creating on/off button in react

Creating on/off button in react

I am making a button that is going to say "disable" when its on and "enable" when its offhow do I do that in react?? I have tried to make it but I have no idea where to even start, is there some syntax im missing?

157
Color changeable SVG?

Color changeable SVG?

I wish to build a website where icon colors can be easily changed with the only change of the cssI've been given a set of custom icons in form of svg files

130