Github页面不显示我的CSS图标和图像

Question

我在这里读过一些帖子，其中图像不显示在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

我错过了什么?

Answer 1

图标图像不显示的原因是由于图像的"参考路径"。

例如，名为' down-arrow.svg '的图像为

实际上位于

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

，但被称为:

 /assets/icons/down-arrow.svg

这个问题可以通过两种方式解决:

1. 参考图片的实际完整路径，例如，使用/Batatabit_CryptoProject/assets/icons/down-arrow.svg

2. 使用相对路径引用图像，即通过从图像引用中删除前导/。

Answer 2

看起来您的路径不正确。移除资产前的/

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

Answer 3

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

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

Answer 4

希望你的问题解决了。但如果你想不出如何解决这个问题，下次再讲!只需从你的github仓库复制图像/图标地址。从你的repo中打开images并复制地址，然后将链接粘贴到你的imagessrc中。然后它就会起作用。比如你的git仓库的图标链接是:https://raw.githubusercontent.com/AlejandroCaputo/Batatabit_CryptoProject/069113465c3018bc1b4835cfaa2f658c5be68f0c/assets/icons/batata.svg你必须把这个链接放到你的代码图标SRC选项中。

Answer 5

这可能是由于以下任何或所有原因;

github是大小写敏感的，所以请确保以下内容不相同，

images.jpg != Images.jpg != images.JPG

需要检查路径目录，down-arrow.svg实际要位于/Batatabit_CryptoProject/assets/icons/down-arrow.svg

或

/assets/icons/down-arrow.svg

希望对大家有帮助。