Having trouble with displaying the logo on the navigation bar (using bootstrap and django)?

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)

Answer №1

Dealing with a similar problem, I discovered that by deleting the file extension (.svg) and allowing Visual Studio code to recommend/select the appropriate extension/path (.jpg), I was able to resolve the issue successfully.

Answer №2

I faced a comparable problem as well. In the .html file, rather than using:

<img src="/app/templates/logoa.png"
, consider displaying the image with this path instead:
<img src="{% static 'app/templates/logoa.png' %}"
. This approach aligns better with the Django framework. I trust this suggestion proves beneficial.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to dim and deactivate a button after it has been clicked once?

Hello, I am attempting to disable and grey out a button after it has been clicked once in order to prevent the user from clicking it again until they refresh the page. I hope my question is clear enough and that you can understand me. Below is the HTML cod ...

Tips for positioning an element in the center of a page using Bootstrap both horizontally and vertically

[Pardon my English] I recently managed to center my "logo" both horizontally and vertically. However, I am looking to have my logo shrink a bit when resizing the browser. Any suggestions on how to achieve this using bootstrap? Index.html <section> ...

Problems with implementing media queries in CSS

Our team is currently delving into the realm of responsive design and experimenting with a mobile-first framework. In an attempt to utilize media queries to adjust our layout based on screen size, we have crafted the following CSS: .flex, .cards, .card { ...

Ensure the footer remains at the bottom of the page even with changing

I am encountering an issue with positioning a footer under dynamic content displayed in a div named txtresults. The div is updated with HTML following a query made with an input value, as shown in this example on JsFiddle: JsFiddle Currently, I am struggl ...

Is there a special Angular technique to ensure a div remains scrolled to the bottom of its items?

In this interactive demonstration, you can see how jQuery can be utilized to create a terminal-like feature. This functionality ensures that as new items are added to a scrollable div, the scroll automatically locks at the bottom. Pay close attention to l ...

Mastering the art of changing text color based on element class name in CSS3

Is it possible to dynamically set the text color of a list item based on the class name of its nested span element? For example, if the span has a class of "green", the text color of the parent li should also be green. How can this be achieved? Demo:https ...

Adjusting the content of a single text box by typing in another

Is it feasible to automatically convert a Nepali date input in one textbox into an English date and display it in another textbox without any page refresh? I have a PHP function that can translate dates between Nepali and English, and I want it to execute ...

What is the proper way to integrate HTML code into an .inc file that is being utilized by a php file?

My title may be a bit off, but I have a PHP file that needs to include a .inc file containing menu code. Here is how I'm attempting to do it in the PHP file: <?php include_once("php_menu.inc") ?> And here is my HTML code for the menu: < ...

What is the process for arranging multiple text boxes beside a radio button upon selection?

Displayed below is the HTML code for a page featuring three radio buttons- <html> <body> <form> <input type="radio" name="tt1" value="Insert" /> Insert<br /> <input type="radio" name="tt2" value="Update" /> Update<b ...

Having trouble loading CSS in an express view with a router

I am encountering an issue where I am unable to load my CSS into a view that is being rendered from a Router. The CSS loads perfectly fine for a view rendered from app.js at the root of the project directory. Below is my current directory structure, node_ ...

The Elusive Key to Perfect Layouts and its Transformation

Today I discovered the Holy Grail of Layouts while coding, but when I implemented it, the output in browsers was not as expected. The borders were incomplete and strange: Here is the code snippet that caused the issue: #container { border: 10px soli ...

Trouble with Chrome's CSS making table cell display as block

After searching, I stumbled upon this question that appeared to have the solution I needed. Surprisingly, even when using chrome 32.0.1700.102, the fiddle provided in the first answer worked perfectly for me. However, when I copied the HTML code into a ne ...

What are the specific constraints for CSS within web components?

<html> <style> body { color: blue; } </style> <body> <h1>Styles!</h1> <p>someone created a very general selector</p> <isolated-stuff></isolated-stuff> </body> <s ...

Charting Add-Ons for jQuery

Looking for suggestions on user-friendly graph drawing plugins compatible with jQuery. Currently developing a web application that will retrieve data from a remote database and present it through visual graphs... Explored jgcharts (the jQuery Google Chart ...

iOS fixed positioning and scrolling

One of the current challenges we are facing involves implementing an action button similar to the one found in GMail for adding new content. This button needs to remain fixed during scroll. Here is the HTML code: <div class="addButton actionButton" on ...

CSS3 translate3D causing input element glitches on Android Webkit

I am encountering some challenges with the Input element in a Webkit Android application that I am currently working on. While testing on version 2.X, it seems that version 3.x does not exhibit these same issues... The structure of the app involves indivi ...

Experiencing an unusual gap following the menu on mobile view for my WordPress website?

I recently launched a WordPress website dedicated to education. In order to make some adjustments, I added subheaders to each page with a simple display:none setting. Surprisingly, while everything looked perfect on desktop view, I noticed some extra spa ...

Horizontal Scroll HTML

Currently in the process of building a website for my father, everything is going smoothly. I followed a helpful Stackoverflow tutorial to create a specific webpage that I now want to customize with a hyperlink and make it scroll horizontally: Sliding divs ...

Reduce the value in the database when a button is clicked using PHP

I am currently working on a carpooling website and I could really use some assistance. I have implemented a button that, once clicked, should decrease the number of available free spaces in the car by one (meaning the person who clicks it will reserve a ...

Should you prioritize internationalizing your image alt attributes?

Do you localize your alt attribute in img tags for internationalization? Is it beneficial in the long run? ...