Navbar logo won't appear (bootstrap/django) - html

Question

Hello I'm trying to add a logo to my navbar but it won't show up. I've looked at other's questions on this matter but I still can't make it show up.
I'm not sure whether the problem is with my code or my image.
I have added the image into the same directory as my code.
My code is as below
.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)

Answer 1

I had the same issue. What worked for me was removing the extension that I was using for the image (.svg) and let Visual Studio code suggest/pick the right extension/path (.jpg).

Answer 2

I had a similar issue. In the .html page, instead of: <img src="/app/templates/logoa.png" try rendering the image with this path instead: <img src="{% static 'app/templates/logoa.png' %}" This syntax is more "Django friendly". Hope this helps.