父文件：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图片无法加载的问题的更多相关文章

  1. Django 04 模板标签（if、for、url、with、autoeacape、模板继承于引用、静态文件加载）

    Django 04 模板标签(if.for.url.with.autoeacape.模板继承于引用.静态文件加载) 一.if.for.url.with.autoescape urlpatterns = ...

  2. [py][mx]django模板继承-课程列表页

    课程列表页分析 1,机构类型 2,所在地区 3.排序 学习人数 先分析下 纵观页面,页头页脚都一样. django提供了模板继承. 至少 不同页面的title 面包屑路径 content内容不一致,以 ...

  3. Django 2.0 学习(13)：Django模板继承和静态文件

    Django模板继承和静态文件 模板继承(extend) Django模板引擎中最强大也是最复杂的部分就是模板继承了,模板继承可以让我们创建一个基本的"骨架"模板,它可以包含网页中 ...

  4. [py]django模板继承

    参考 1.展示arr,d等数据类型 2.逻辑for if / url获取 3.获取内置变量 django模板继承 通过搞一个base.html 这个base.html可以包含两类 block片断 其他 ...

  5. 使用图片预加载，解决断网后无法从后台获取提示网络异常的logo图片的问题

    项目中有需求,断网后,显示小提示窗,里面包含网络异常提示语和异常小logo图片. 在实际操作时,遇到,断网后,无法从后台获取异常小logo图片. 我是才用图片预加载的方法解决这个问题的,解决方法如下: ...

  6. Python学习---django模板继承180123

    django模板继承  --20180123 a.include 模板标签 b.extend(继承)模板标签 ------include 模板标签 该标签允许在(模板中)包含其它的模板的内容. 标签的 ...

  7. django学习-8.django模板继承（block和extends）

    1.前言 django模板继承的作用:模板可以用继承的方式来实现复用,减少冗余内容. 一般来说,一个网站里一般存在多个网页的头部和尾部内容都是一致的,我们就可以通过模板继承来实现复用. 父模板用于放置 ...

  8. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  9. ajax读取图片后排列问题（先加载完图片再排列）

    网上找了个瀑布流的图片排列插件.从数据库读取图片路径后显示时出现了位置重叠问题. $.ajax({ type: "POST", url: "index.aspx" ...

随机推荐

  1. Scala具体解释---------控制结构和函数

    条件表达式: Scala的if else语法结构和Java的一样.只是,Scala的if else表达式有值.这个值就是跟在if或者else后面的表达式的值. 比如: if(x>0) 0 els ...

  2. [个人开发人员赚钱九］做一个日收入10元的APP！

    [导语］尽管讲了非常多个人开发人员的文章.但新手开发人员怎样赚自己的第一个10块钱.确是最难的事情.群里有人说都不知道干什么app赚钱.全然没有想法.而且常常问我有什么高速赚钱的方法.我仅仅能遗憾地 ...

  3. 40. Implement Queue by Two Stacks【medium】

    As the title described, you should only use two stacks to implement a queue's actions. The queue sho ...

  4. linux下创建用户(转)

    转自 http://www.cnblogs.com/ylan2009/articles/2321177.html Note: 1, Linux Shell 按Tab键不能补全 发现使用新增的用户登陆的 ...

  5. php 给图片增加背景平铺水印代码

    如果你想利用php 给图片增加背景平铺水印效果话,必须利用php的一个插件来实例,就是利用imagick,他可以给图片增加背景平铺水印效果哦,下面我们提供一款实例代码. 如果你想利用php教程 给图片 ...

  6. js 控制按钮点击后不可用

    <input type="button" id="btn" value="免费获取验证码" /> <script type ...

  7. CSS3自定义滚动条样式 -webkit-scrollbar (一)

    Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scroll ...

  8. 01 Java图形化界面设计——容器（JFrame）

    程序是为了方便用户使用的,因此实现图形化界面的程序编写是所有编程语言发展的必然趋势,在命令提示符下运行的程序可以让我们了解java程序的基本知识体系结构,现在就进入java图形化界面编程. 一.Jav ...

  9. 下面的那一个不属于MVC模式中的对象？

    下面的那一个不属于MVC模式中的对象? A. Model B. View C. Collection D. Controller 解答:C MVC是三个单词的缩写,分别为: 模型(Model),视图( ...

  10. Centos 下面安装 docker

    试过了虚拟机VM ,今天尝试在虚拟机centos 中安装 docker ,入门是看的阮一峰的http://www.ruanyifeng.com/blog/2018/02/docker-tutorial ...