Le logo de la barre de navigation ne s'affiche pas

Quelque chose d'étrange se passe. J'ai ajouté mon logo en haut à droite de mon site Web et il s'affiche parfaitement lorsque je regarde mon site Web dans mon hôte local sur mon serveur en direct. Cependant, lorsque je regarde sur mon site Web hébergé publiquement (en utilisant les pages GitHub), le logo ne s'affiche pas. Des suggestions sur la façon de résoudre ce problème ou sur ce que pourrait être le problème ?

Code 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);
}

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

Lorsque je vais sur le site Web hébergé publiquement et que je l'inspecte, il semble que l'image soit là mais pas visible

Il s'agit de la section style.css qui s'affiche lorsque je mets en surbrillance le logo


Solution du problème

C'est peut-être parce que votre logo est local, ce qui signifie qu'il se trouve uniquement sur votre ordinateur. Si vous le téléchargez sur Internet et que vous référencez ensuite la source de cette manière via une URL d'image, cela devrait fonctionner.

Commentaires

Posts les plus consultés de ce blog

La fonction GCP Cloud pour écrire des données dans BigQuery s'exécute avec succès, mais les données n'apparaissent pas dans la table BigQuery

Erreur Symfony : "Une exception a été levée lors du rendu d'un modèle"

Le shell POSIX (sh) redirige stderr vers stdout et capture stderr et stdout dans des variables