Django模板继承后出现logo图片无法加载的问题

父文件：index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>{% block title %}Index{% endblock %}</title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../static/css/index.css">
  <script src="static/js/index.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--导航栏-->

  <a class="navbar-brand" href="/">
    {% block ico %}<img src="/static/images/ppl.jpg" alt="logo" style="width:50px;"> {% endblock %}
  </a>
  <!--<h2>胶囊</h2>-->
  <!--<p>胶囊导航:</p>-->

  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="/">首页</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/insert/" id="insert">insertPerson</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/get1/">addAccount</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/search1/">SearchPerson</a>
    </li>
	<li class="nav-item">
      <a class="nav-link disabled" href="#">SearchPerson</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">注册/登录</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">注册</a>
        <a class="dropdown-item" href="#">登录</a>
        <a class="dropdown-item" href="#">登出</a></div>
    </li>
  </ul>

</nav>
{% block index %}
<br>
<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- 轮播图片 -->
  <div class="carousel-inner" >
    <div class="carousel-item active">
      <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg" style="width:100%">
    </div>
  </div>

  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>
<div class="foot-box"></div>
{% endblock %}

<!--实现鼠标滑过导航栏增加active类属性-->
<script>
  $(document).ready(function(){
    $('.nav-link').hover(
      function(){
        $(this).addClass('active');
      },
      function(){
        $(this).removeClass('active');
      }
    );
  });
</script>
</body>
</html>

子文件-继承自index.html

{% extends "index.html" %}
{% block title %}Insert{% endblock %}

{% block index %}

<!--<form action="/do/" method="post">-->
    <!--姓名：<input type="text" name="username"><br>-->
    <!--年龄：<input type="text" name="userage"><br>-->
    <!--<input type="reset">-->
    <!--<button type="submit">提交</button>-->
<!--</form>-->

<div class="container">
    <br>
  <a href="#demo" class="btn btn-primary" data-toggle="collapse">插入新人信息</a>
  <div id="demo" class="collapse">
  <form action="/do/" method="post">
    <div class="form-group">
      <label for="user">Username:</label>
      <input type="text" class="form-control" id="user" name="username" placeholder="Enter Username">
    </div>
    <div class="form-group">
      <label for="age">Userage:</label>
      <input type="password" class="form-control" id="age" name="userage" placeholder="Enter Userage">
    </div>
    <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox"> Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  </div>
</div>

{% endblock %}

注意！！！

在index.html文件中的

    {% block ico %}<img src="/static/images/ppl.jpg" alt="logo" style="width:50px;"> {% endblock %}

中

src="/static/images/ppl.jpg" 和 src="static/images/ppl.jpg"　完全不一样的效果，前者被继承后子页面的logo可正常显示，后者则会出现图片无法加载的问题。

因为在settings中我们已经设置了静态文件收集路径，在base模板中索引静态文件的时候需要从static根路径下进行索引，故需要加"/"，此坑难发现，还需多学习。

Django模板继承后出现logo图片无法加载的问题

猜你喜欢