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

bwntbbo3 于 4个月前发布在 Git

关注(0)|答案(5)|浏览(65)

我在这里读过一些帖子，当图像在Github页面上不显示时，主要问题是因为它是大小写敏感的。

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

字符集
这是我放置大部分图像的方式，但仍然可以找到我错在哪里？
这是我的repo https://github.com/AlejandroCaputo/Batatabit_CryptoProject的链接
这是我的github页面https://alejandrocaputo.github.io/Batatabit_CryptoProject/index.html的链接
我错过了什么？

css

来源：https://stackoverflow.com/questions/65711511/github-pages-not-showing-icons-and-images-of-my-css

5条答案

按热度按时间

ewm0tg9j1#

图标图像不显示的问题的原因是由于图像的“参考路径”。
例如，名为“down-arrow.svg”的图像是
实际上位于
/Batatabit_CryptoProject/assets/icons/down-arrow.svg，
但被称为：

/assets/icons/down-arrow.svg

字符集
问题可以通过两种方式解决：
1.通过使用/Batatabit_CryptoProject/assets/icons/down-arrow.svg，使用其实际完整路径（即，
1.使用相对路径引用图像，即从图像引用中删除前导/。

赞(0）回复(0）举报 4个月前

knsnq2tg2#

看起来你的路径不正确。在资产之前删除/

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

字符集

赞(0）回复(0）举报 4个月前

fhg3lkii3#

我相信这会起作用，但我认为你可以尝试相对路径而不是绝对路径。

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

字符集

赞(0）回复(0）举报 4个月前

vsdwdz234#

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

赞(0）回复(0）举报 4个月前

z6psavjg5#

这可能是由于以下任何或所有原因;
github是区分大小写的，所以请确保以下内容不相同，