照片无法加载且链接已失效

Question

所以我用 github 存储库在 netlify 上托管了我的网站。我在网站上使用的所有照片和文件都在那里，但它们不会加载。只有所有文件夹之外的 index.html 和 style.css 才会加载。我的 github 存储库有一个 link。 Github Repo

html{
  background-color:#abb2bc;
}

body{
  margin:0;

}
h1 {
  margin:0;
  background-color: #363b42;
}
img{
  width:250px;
}

.navbar{
  text-align:center;
}

.blogpost{
  background-color:white;
  padding:5%;
  margin:3%

}

#blogheader{
  margin-top:15px;
}

.blogimage{
  margin-top:25px;
}

<!DOCTYPE html>
<html>

<head>
  <title>GamingCoachBlog</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <header>
      <div class="navbar">
        <h1>GamingCoach</h1>
      </div>
  </header>
  <main>
    <div class="blogpost">
      <h2 id="blogheader">Recent Blog Posts</h2>
      <a href="/Users/david/Desktop/Blog/Articles/Ten Fortnite Tips For Season 8/index.html"><img class="blogimage" src="C:/Users/david/Desktop/Blog/Images/How to get more wins in Fortnite.png" alt="How to get more wins in Fortnite"></a>
    </div>
  </main>
</body>

</html>

Answer 1

'C://' 引用或本地引用不能联机使用。除此之外，不建议在您的网页名称和文件名中使用 spaces，因为某些浏览器可能不支持 spaces 或会将其转换为网络标准、“+”或space (U+0020) 的 unicode 标准，以便可以对它们执行更多操作。

修复：

Swap
src="C:/Users/david/Desktop/Blog/Images/How to get more wins in Fortnite.png"
with
src="Images/How to get more wins in Fortnite.png"

解决您的问题并正确渲染照片，前提是您的浏览器不反对 spaces。

Answer 2

我遇到了同样的问题，我保存在资产中的照片没有显示在 netlify 页面中，而且在刷新页面时它显示为找不到页面。对于这两个问题，我使用了以下步骤。

第 1 步：

在 Public 文件夹中使用 _redirects 文件，其中包含以下代码 /* /index.html 200，这有助于重定向到您的页面。添加该文件后使用 npm 运行 build 以便在 build 文件夹中更新。

第 2 步：

为了显示图像，我在名为 admin 的构建文件夹中创建了一个文件夹，并在该文件夹中粘贴了名为 static 的文件夹，该文件夹在构建文件夹中可用。

希望这在某些情况下可能有所帮助！

照片无法加载且链接已失效

Photos won't load and links are dead

html

css

hosting

netlify