导航栏徽标不会显示

Question

发生了一些奇怪的事情。我已将我的徽标添加到我网站的右上角，当我在我的实时服务器上的本地主机中查看我的网站时，它会完美显示。但是，当我查看我的公共托管网站（使用 GitHub 页面）时，徽标没有显示。关于如何解决这个问题或可能是什么问题的任何建议？

CSS代码

            .bd-grid{
                max-width: 1024px;
                display: grid;
                grid-template-columns: 100%;
                grid-column-gap: 2rem;
                width: calc(100% - 2rem);
                margin-left: var(--mb-2);
                margin-right: var(--mb-2);
            }
            .l-header{
                width: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: var(--z-fixed);
                background-color: var(--first-color);
            }

            /*===== NAV =====*/
            .nav{
                height: var(--header-height);
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 20px;
            }
            @media screen and (max-width: 768px){
                .nav__menu{
                    position: fixed;
                    top: var(--header-height);
                    right: -100%;
                    width: 50%;
                    height: 100%;
                    padding: 2rem;
                    background-color: rgba(219, 236, 244, 0.852);
                    transition: .5s;
                    backdrop-filter: blur(10px);
                    font-size: 25px;
                    text-align: left;
                    box-shadow: -2px 0px 4px 1px var(--first-color);
                }
            }
            .nav__item{
                margin-bottom: var(--mb-4);
                padding: var(--mb-2);
            }

            .nav__link{
                position: relative;
                color: var(--dark-color);
            }
            .nav__link:hover{
                color: var(--first-color);
                font-weight: 900;
            }
            .nav__logo{
                color: var(--white-color);
                font-family: Snell Roundhand, cursive;
            }
            .nav__toggle{
                color: var(--white-color);
                font-size: 1.5rem;
                cursor: pointer;
            }

            .nav__logo{
                text-transform: uppercase;
                font-weight: 700;
                letter-spacing: -1px;
                display: inline-flex;
                align-items: center;
                column-gap: .5rem;
                transition: .3s;
            }
            
            .logo-image{
                width: 150px;
                height: 150px;
                border-radius: 50%;
            }
            
            
            .nav__logo-icon{
                font-size: 10px;
                color: var(--first-color);
            }

HTML代码

            <a class="nav__logo" href="/">
                <div class="logo-image">
                      <img src="/assets/img/logosignature.png" class="nav__logo-icon">
                </div>
            </a>

            <div class="nav__menu" id="nav-menu">
                <ul class="nav__list">
                    <li class="nav__item"><a href="#home" class="nav__link active">Home</a></li>
                    <li class="nav__item"><a href="#about" class="nav__link">About</a></li>
                    <li class="nav__item"><a href="#skills" class="nav__link">Skills</a></li>
                    <li class="nav__item"><a href="#portfolio" class="nav__link">Portfolio</a></li>
                    <li class="nav__item"><a href="#contact" class="nav__link">Contact</a></li>
                </ul>
            </div>

            <div class="nav__toggle" id="nav-toggle">
                <i class='bx bx-menu'></i>
            </div>
        </nav>
    </header>

Answer 1

可能是因为您的徽标是本地的，这意味着它只存在于您的计算机上。如果您将它上传到互联网，然后通过图片 URL 引用来源，那么它应该可以工作。

Answer 2

别担心，这在编码的早期发生在我身上，别担心。首先我会推荐你学习HTML中的文件路径。这是一个link，您可以在其中了解和学习文件路径。

HTML FILE PATHS

要回答您的问题，请将整个目录上传到 github 页。我的想法是，您可能错过了要在 github 上上传的 /assets/img/ 目录。如果您可以分享 github link，我将非常乐意指出目录和丢失的文件。让我知道这是否适合您。编码愉快 ;)

Answer 3

发生这种情况的原因可能有多种：

GitHub 页面上的文件名和扩展名区分大小写，因此请检查您是否在图像的 src 属性中正确输入了它。
尝试删除图像 src 属性中的初始“/”字符。
指定的路径可能不正确

Answer 4

应该是打错了。但是让我分享一个很酷的方法来检查图像是否在附近。

您可以随时打开开发人员工具，转到“来源”并在那里找到上传的文件。

导航栏徽标不会显示

Nav bar logo wont show up

html

javascript

css

nav

navbar