我的 GitHub 页面上的图像未加载答案

【问题标题】：The images on my GitHub page are not loading我的 GitHub 页面上的图像未加载
【发布时间】：2023-10-27 08:57:01
【问题描述】：

我目前正在与 Odin 项目一起处理 Google Homepage 任务。我完成了代码并将所有文件提交到我的 google-homepage GitHub 存储库，然后上传到 GitHub 页面以通过 GitHub 制作网站。一切正常，但图片没有加载到网站上。

我搜索了堆栈溢出论坛和 Odin 项目，但找不到我的问题的答案。一个论坛说 GitHub 区分大小写，所以我检查以确保我的代码适合我的图像，甚至将 googlelogo_color_.png 更改为 googlelogo-color.png 并重新提交以消除下划线，但没有任何改变。我对这一切还很陌生，所以我真的不知道如何使用 GitHub，除了 Odin 项目和论坛教给我的一点。这是我的repository。

这是我的代码的 sn-p 与图像源：

`<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>`

【问题讨论】：

这是未显示的图像之一的 URL：https://ran-the-vegan.github.io/home/ranico/Projects/the_odin_project/google-homepage/googlelogo-color.png。这看起来不对:(我想你只是想要googlelogo-color.png。
仅仅链接到你的仓库是堆栈溢出的题外话。请把代码放在问题本身，否则一旦你修复它，问题将毫无用处

标签： html css image github github-pages

【解决方案1】：

您需要在您的index.html 文件中更改您的img src 属性，我在您应该编辑的行之前添加了 cmets

<!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>

【讨论】：

这非常有效。我对其进行了编辑并将其推送到 GitHub，并在等待页面刷新几分钟后工作。谢谢你:)

【解决方案2】：

对于我最初编写的 html 并且该网站不会加载图片，但是经过一些头部刮擦后，我发现问题出在前 2 个点和斜杠上，在我重写代码后，它看起来像这样，当我在大约 2 分钟后将其上传到 github图片。我的 css 背景图像也有同样的问题，我做了同样的事情，显然它也能正常工作，但我不得不等待大约 5 分钟才能重新加载网站。我希望这会有所帮助！

【讨论】：