Hello, I am struggling to include a logo in my navbar and it's not being displayed. Despite researching similar queries from others, I still can't figure out why the image won't show up. I'm uncertain whether the issue lies within my code or the image itself. The image has been placed in the same directory as my code.
https://i.sstatic.net/kD7Gw.png
Below is the code I have:
.navbar li a {
background-image: "/app/static/app/images/logoa.png";
}
.search {
list-style: none;
padding: 0;
width: fit-content;
border: 0px;
/*border added to visualise collision box*/
}
.search-bar {
display: none;
}
.search-icon {
width: fit-content;
border: 0px;
/*border added to visualise collision box*/
}
.search-icon:hover+.search-bar {
display: block;
}
.search-bar:hover {
display: block;
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<img src="/app/templates/logoa.png" alt="computer display with dna in it" width="30" height="24" class="d-inline-block align-text-top">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">homepage</a>
<a class="nav-link" href="#">form</a>
<a class="nav-link disabled" href="#">workflow</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">tools</a>
</div>
<ul class="search">
<li class="search-icon"><i class="fas fa-search" style="position:absolute; right:10px;"></i></li>
<li class="search-bar" style="position:absolute; right:10px;"><input placeholder="enter search" action=""></li>
</ul>
</div>
</div>
</nav>
edit;; if i try to follow the path i set in the code it leads me to the image (in visual studio code) but it can't find it in the browser console
help.png:1 Failed to load resource: the server responded with a >status of 404 (Not Found)