Search code examples
htmlcssdjangodjango-templatesdjango-staticfiles

Images are loading in all pages except for one in Django

So I am extending base.html onto another page in Django. The images load in every single page that extends the base.html except for one. I've included the {% load static %} tag inside the template that is not loading the image. I have no clue why the images are not loading in this one specific page. What's wrong with it?

base.html

{% load static %}
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="{% static 'styles/style.css' %}" />
    <title>BugTracker</title>
    {% block htmlhead %}
    {% endblock htmlhead %}
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">

</head>
<body>

    {% include 'navbar.html' %}
    
    <!-- END OF NAVBAR  -->
    <div class="container">
      {% include 'sidebar.html' %}
        <!-- END OF ASIDE -->
        {% block content %}{% endblock %}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{% static 'js/script.js' %}"></script>
    <script src="{% static 'js/charts.js' %}"></script>
</body>
</html>

This is where I am loading the <img src>

navbar.html

<nav>
  <div class="container2">
      <img src="../static/images/logo-no-background.png" class="logo">
      <div class="search-bar">
          <span class="material-icons-sharp">search</span>
          <input type="search" placeholder="Search">
      </div>
      <div class="profile-area">
          <div class="theme-btn">
              <span class="material-icons-sharp active">light_mode</span>
              <span class="material-icons-sharp">dark_mode</span>
          </div>
          <div class="profile">
              <div class="profile-photo">
                  <img src="../static/images/avatar.svg" alt="">
              </div>
              <h5>Miko Dawili</h5>
              <span class="material-icons-sharp">expand_more</span>
          </div>
          <button id="menu-btn">
              <span class="material-icons-sharp">menu</span>
          </button>
      </div>
  </div>
</nav>

sidebar.html

<!-- SIDEBAR -->

<aside>
    <div class="top">
        <div class="logo">
            <img src="../static/images/logo-no-background.png" alt="">
            <h2>MA<span class="danger">BLE</span></h2>
        </div>
        <div class="close" id="close-btn">
            <span class="material-icons-sharp">close</span>
        </div>
    </div>

    <div class="sidebar">
        <a href="/">
            <span class="material-icons-sharp">grid_view</span>
            <h3>Dashboard</h3>
        </a>
        <a href="{% url 'manage-users' %}">
            <span class="material-icons-sharp">person_outline</span>
            <h3>Customers</h3>
        </a>
        <a href="{% url 'project-home' %}">
            <span class="material-icons-sharp">receipt_long</span>
            <h3>Projects</h3>
        </a>
        <a href="#">
            <span class="material-icons-sharp">insights</span>
            <h3>Analytics</h3>
        </a>
        <a href="">
            <span class="material-icons-sharp">mail_outline</span>
            <h3>Messages</h3>
            <span class="message-count">26</span>
        </a>
        <a href="#">
            <span class="material-icons-sharp">settings</span>
            <h3>Settings</h3>
        </a>
        <a href="#">
            <span class="material-icons-sharp">logout</span>
            <h3>Logout</h3>
        </a>
    </div>
</aside>
<!-- SIDEBAR -->

template that's not loading the images

{% extends 'base.html' %}
{% load static %}

{% block content %}
  
<main id="content">
  <!-- <h1 class="title">Dashboard</h1> -->
  
  
</main>
{% endblock content %}

Another page that's similar that IS loading the images

{% extends 'base.html' %}
{% load static %}
{% block content %}

<main id="content">
  <h1 class="title"><a href="{% url 'create-project' %}" class="button-3" role="button">Create New Project</a></h1>
  <div class="recent-orders">
    <h2>Recent Orders</h2>
    <table>
        <thead>
            <tr>
                <th>Product Name</th>
                <th>Product Number</th>
                <th>Payment</th>
                <th>Status</th>
                <th></th>
            </tr>
        </thead>
        {% for project in page_obj %}
        <tbody>
            <tr>
              <td><a href="{% url 'project' project.id %}">{{project.name}}</a></td>
              <td>{{project.description}}</td>
                <td>Due</td>
                <td>{{project.created|date:"F d, Y"}}</td>
                <td class="primary">Details</td>
            </tr>
            
        </tbody>
        {% endfor %}
    </table>
    <a href="#">Show All</a>
</div>
</main>
{% endblock %}

Here is what the non working page looks like

enter image description here

Here is what it should look like

enter image description here

Solution

  • I solved the problem, what I did initially was use relative urls like so <img src="../static/images/logo-no-background.png" alt=""> when I should have been using the static tag to load the images.

    <img src="{% static 'images/logo-no-background.png' %}" alt="">

    This works on all pages now.