图像不显示在 Github 页面中

Question

GitHub 页面 https://chryspenalber.github.io/hercules/

存储库： https://github.com/chryspenalber/hercules

我通过 css 插入的图像没有显示在 github 页面中，但在 localhost 中显示。我做错了什么？

我看到了一些关于它的文章，包括区分大小写，但没有任何作用。我制作了其他项目，但我不明白我在这个项目上做了什么不同的事情。

这只是一个例子，但所有图像都会发生这种情况。

<div class="img-overlay"></div>
    <div id="topo">
        <a href="#">
            <img  src="assets/images/chevron-double-up-white.svg" alt="">
        </a>
    </div>

.img-overlay {
    position: absolute;
    top: -300px;
    left: 0;
    width: 100%;
    height: 2400px;
    background: linear-gradient(to bottom, transparent 70%, var(--bg-color) 100%), url(/assets/images/bg-hercules.jpg) no-repeat top center / cover;
    opacity: 1;
    z-index: -1;
}

Answer 1

图像的路径有一个微妙但非常重要的区别：

• img：资产/图像/chevron-double-up-white.svg
• css：/assets/images/bg-hercules.jpg

一个是相对路径，另一个是从站点根开始的绝对路径。 在 GitHub 页面中，您无法控制网站的根目录。

在 CSS 中也使用相对路径。 例如：

url(../images/bg-hercules.jpg)