Nav bar logo wont show up

Question

Something strange is happening. I have added my logo to the top right of my website and it shows up perfectly when I look at my website in my localhost on my live server. However, when I look on my publicly hosted website (using GitHub pages) the logo does not show up. Any suggestions on how to fix this or what the issue might be?

CSS Code

            .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 Code

            <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

It might be because your logo is local, meaning that it is only on your computer. If you upload it to the inte.net and then reference the source that way through an image URL, then it should work.

Answer 2

don't worry this happened to me on the early days of coding don't worry. First of all I will recommend you to learn the file paths in HTML. Here's a link where you can understand and learn the file paths.

HTML FILE PATHS

To answer your question, please upload the whole directory to github pages. What I think is, you have probably missed the /assets/img/ directory to upload on github. If you can share the github link, I would be more than happy to point out the directory and the missing file. let me know if this works for you. Happy Coding;)

Answer 3

There can be multiple cases why this is happening:

1. File names and extensions are case sensitive on GitHub pages so check if you have entered it correctly in src attribute of image.
2. Try removing the initial '/' character in src attribute of image.
3. Path specified might be incorrect

Answer 4

Should be a typo. But let me share a cool way to check if the image is around there or not.

You can always open developer tools, go to Sources and locate the uploaded files there.