Mdaw11
April 18, 2023, 12:14am
1
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/boxicons@2.0.9/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/chart.js@2.9.3/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>
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
Here is what it should look like
1 Like
I don’t see anywhere in your templates where you are trying to load images. What am I missing here?
What does the console log look like for the http requests in both cases?
Side note: load static only instructs the template engine to load the static tag. It has nothing to do with loading images.
You may also find it instructive to look at the html as it has been rendered in the browser. Compare that portion of the html between those two versions.
Mdaw11
April 18, 2023, 12:45am
3
navbar
<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
<!-- 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 -->
This is where I put the images and then as seen above, I used {% include 'navbar.html' % and {% include 'sidebar.html' %} so that they are rendered within base.html. Like I said above, the images load in this template
project-home.html
{% 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 %}
But then the images don’t load in this template
{% extends 'base.html' %}
{% load static %}
{% block content %}
<main id="content">
<!-- <h1 class="title">Dashboard</h1> -->
</main>
{% endblock content %}
More likely than anything else, it’s due to this:
You’re using relative urls when you should be using the static tag with the appropriate reference to the image file.
Specifically in this case, I’m going to guess that the root cause is due to the page that isn’t working doesn’t have these image files relative to the current url.
This would be more obvious if you look at the http requests in the console log.
