Github 页面未显示我的 CSS 的图标和图像答案

【问题标题】：Github Pages not showing Icons and images of my CSSGithub 页面未显示我的 CSS 的图标和图像
【发布时间】：2021-01-13 23:52:46
【问题描述】：

我在这里读过一些帖子，其中图像未显示在 Github 页面上的主要问题是因为它区分大小写。我一直在处理相同的图像不显示问题，但在这种情况下我没有看到错误。

.header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('/assets/icons/down-arrow.svg');

这是我放置大部分图片的方式，但我仍然可以找到我错在哪里？

这是我的仓库的链接 https://github.com/AlejandroCaputo/Batatabit_CryptoProject

这是我的 github 页面的链接 https://alejandrocaputo.github.io/Batatabit_CryptoProject/index.html

我错过了什么？

【问题讨论】：

标签： html css github-pages

【解决方案1】：

图标图像不显示问题的原因是由于图像的“参考路径”。

例如，名为“down-arrow.svg”的图片是

实际位于

/Batatabit_CryptoProject/assets/icons/down-arrow.svg,

但被称为：

 /assets/icons/down-arrow.svg

问题可以通过两种方式解决：

参考图片的实际完整路径，即，通过使用 /Batatabit_CryptoProject/assets/icons/down-arrow.svg
使用相对路径引用图像，即 I.E.通过从图像参考中删除前导 /。

【讨论】：

【解决方案2】：

您的路径似乎不正确。删除资产前的/

.header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('assets/icons/down-arrow.svg');

【讨论】：

【解决方案3】：

我确定这是否可行，但我认为您可以尝试相对路径而不是绝对路径。例如，在您的情况下，更改以下内容

.header--button span {
  display: inline-block;
  width: 13px;
  height: 8px;
  margin-left: 10px;
  background-image: url('./assets/icons/down-arrow.svg');
}

【讨论】：

【解决方案4】：

希望您的问题得到解决。但是下次如果你不知道如何解决这个问题！只需从您的 github 存储库中复制图像/图标地址。从您的 repo 打开图像并从中复制地址，然后将链接粘贴到您的 imge src 中。然后它将起作用。就像你的 git repo 的图标链接是：https://raw.githubusercontent.com/AlejandroCaputo/Batatabit_CryptoProject/069113465c3018bc1b4835cfaa2f658c5be68f0c/assets/icons/batata.svg 您必须将此链接发布到您的代码图标 src 选项中。

【讨论】：