Solution 1 :

You need to change your img src attributes in your index.html file, I added <!-- Edit Line Below --> comments before lines you should edit

<!DOCTYPE>
<html>

<head>
  <title>Google Homepage</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="topnav">
    <ul>
      <li><a href="https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header">About</a></li>
      <li><a href="">Store</a></li>
      <div class="topnavright">
        <li><a href="">Gmail</a></li>
        <li><a href="">Images</a></li>

        <!-- Edit Line Below -->
        <li><img src="./googleappsicon.png" width="20" height="20" alt="Google Apps Icon"></li>
        <li><input type="submit" value="Sign in"></li>
      </div>
    </ul>
  </div>

  <div class="logosearch">
    <p>
      <!-- Edit Line Below -->
      <img src="./googlelogo-color.png" width="272" height="92" alt="Google Logo"><br>
      <input>
      <p>
        <input type="submit" value="Google Search">
        <input type="submit" value="I'm Feeling Lucky">
      </p>
    </p>
  </div>

  <div class="bottomnav">
    <ul>
      <li><a href="">Advertising</a></li>
      <li><a href="">Business</a></li>
      <li><a href="">How Search works</a></li>
      <div class="bottomnavright">
        <li><a href="">Privacy</a></li>
        <li><a href="">Terms</a></li>
        <li><a href="">Settings</a></li>
      </div>
    </ul>
  </div>
</body>

</html>

Solution 2 :

For the html i first had written
and the site wouldnt load the picture, but after some head scracthing i found that the problem was the first 2 dots and the slash, after i rewrote the code it looked something like so and when i uploaded it to github after about 2 minutes it loaded the picture. I also had the same problem with my css background image and i did the same thing and aparentlly it worked as well but i had to wait about 5 minutes to reload the site. I hope this helped!

Problem :

I am currently working on the Google Homepage assignment with the Odin Project. I finished the code and committed all of the files to my google-homepage GitHub repository and then uploaded to the GitHub pages to make a website through GitHub. Everything is working fine but the images are not loading onto the website.

I have searched through the stack overflow forums and Odin Project but could not find an answer to my problem. One forum said that GitHub is case sensitive so I checked to make sure my code was right for my images and even changed the googlelogo_color_.png to googlelogo-color.png and recommit it to get rid of the underscores and nothing changed. I am still new to all of this so I really have no idea how to work with GitHub except for the bit that the Odin Project has taught me and through forums. Here is my repository.

Here is a snippet of my code with the image sources:

`<div class ="topnavright">
    <li><a href="">Gmail</a></li>
    <li><a href="">Images</a></li>

    <li><img src="/home/ranico/Projects/the_odin_project/google- 
    homepage/googleappsicon.png" width="20" height="20" alt="Google Apps 
    Icon"></li>
    <li><input type="submit" value="Sign in"></li>
</div>
</ul>
</div>

<div class="logosearch">    
<p> 
    <img src="/home/ranico/Projects/the_odin_project/google- 
    homepage/googlelogo-color.png" width="272" height="92" alt="Google Logo"> 
    <br>
    <input>
<p> 
    <input type="submit" value="Google Search">
    <input type="submit" value="I'm Feeling Lucky">
</p></p>
</div>`

Comments

Comment posted by FoggyDay

This is the URL for one of the images that aren’t displaying:

Comment posted by gman

Just linking to your repo is offtopic for stack overflow. Please put the code

By