Question

所以我将我的网站托管在我的github存储库上netlify上。我在网站上使用过的所有照片和文件都在那里，但是不会加载。仅加载所有文件夹之外的index.html和style.css。我有一个指向我的github存储库的链接。 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：//”参考或本地参考不能在线使用。除此之外，不建议在网页名称和文件名中使用空格，因为某些浏览器可能不支持空格，或者会将空格转换为Web标准，“ +”或unicode标准的空格（U + 0020），因此可以对它们执行更多操作。

FIX：

交换
  src =“ C：/ Users / david / Desktop / Blog / Images /如何在Fortnite.png中获得更多胜利”
  与
  src =“ Images /如何在Fortnite.png中获得更多胜利”

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

Answer 2

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

第 1 步：

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

第 2 步：

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

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

照片无法加载，链接已消失

2 个答案: