Django中单个继承base.html的页面图片加载失败求助

问题描述 #

Django项目中通过继承base.html开发页面，多数页面能正常加载图片，但有一个页面例外。已在异常页面模板中添加{% load static %}标签，仍无法定位问题。

相关代码 #

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>

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 -->

无法加载图片的模板 #

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

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

正常加载图片的页面模板 #

{% 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 %}

页面截图 #

异常页面 #

正常页面 #

问题原因与解决方法 #

问题出在navbar.html和sidebar.html的图片路径写法——使用了相对路径（../static/images/...），这种路径会随当前页面URL层级变化，导致部分页面无法定位图片。

修复步骤 #

1. 在navbar.html和sidebar.html开头添加{% load static %}标签
2. 将所有图片的src属性替换为{% static 'images/xxx.png' %}格式，让Django静态资源解析器生成正确路径

修改后的navbar.html示例

{% load static %}
<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示例

{% load static %}
<!-- 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 -->

修改后，所有页面无论URL层级如何，都能正确加载图片。

内容的提问来源于stack exchange，提问作者mdaw11