父文件：index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <title>{% block title %}Index{% endblock %}</title>
  5.   <meta charset="utf-8">
  6.   <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">
  8.   <link rel="stylesheet" href="../static/css/index.css">
  9.   <script src="static/js/index.js"></script>
  10.   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  11.   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  12.   <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  13.   <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  14. </head>
  15. <body>
  16. <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  17. <!--导航栏-->
  18.  
  19.   <a class="navbar-brand" href="/">
  20.     {% block ico %}<img src="/static/images/ppl.jpg" alt="logo" style="width:50px;"> {% endblock %}
  21.   </a>
  22.   <!--<h2>胶囊</h2>-->
  23.   <!--<p>胶囊导航:</p>-->
  24.  
  25.   <ul class="nav nav-pills">
  26.     <li class="nav-item">
  27.       <a class="nav-link" href="/">首页</a>
  28.     </li>
  29.     <li class="nav-item">
  30.       <a class="nav-link" href="/insert/" id="insert">insertPerson</a>
  31.     </li>
  32.     <li class="nav-item">
  33.       <a class="nav-link" href="/get1/">addAccount</a>
  34.     </li>
  35.     <li class="nav-item">
  36.       <a class="nav-link" href="/search1/">SearchPerson</a>
  37.     </li>
  38. 	<li class="nav-item">
  39.       <a class="nav-link disabled" href="#">SearchPerson</a>
  40.     </li>
  41.     <li class="nav-item dropdown">
  42.       <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">注册/登录</a>
  43.       <div class="dropdown-menu">
  44.         <a class="dropdown-item" href="#">注册</a>
  45.         <a class="dropdown-item" href="#">登录</a>
  46.         <a class="dropdown-item" href="#">登出</a></div>
  47.     </li>
  48.   </ul>
  49.  
  50. </nav>
  51. {% block index %}
  52. <br>
  53. <div id="demo" class="carousel slide" data-ride="carousel">
  54.  
  55.   <!-- 指示符 -->
  56.   <ul class="carousel-indicators">
  57.     <li data-target="#demo" data-slide-to="0" class="active"></li>
  58.     <li data-target="#demo" data-slide-to="1"></li>
  59.     <li data-target="#demo" data-slide-to="2"></li>
  60.   </ul>
  61.  
  62.   <!-- 轮播图片 -->
  63.   <div class="carousel-inner" >
  64.     <div class="carousel-item active">
  65.       <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" style="width:100%">
  66.     </div>
  67.     <div class="carousel-item">
  68.       <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg" style="width:100%">
  69.     </div>
  70.     <div class="carousel-item">
  71.       <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg" style="width:100%">
  72.     </div>
  73.   </div>
  74.  
  75.   <!-- 左右切换按钮 -->
  76.   <a class="carousel-control-prev" href="#demo" data-slide="prev">
  77.     <span class="carousel-control-prev-icon"></span>
  78.   </a>
  79.   <a class="carousel-control-next" href="#demo" data-slide="next">
  80.     <span class="carousel-control-next-icon"></span>
  81.   </a>
  82.  
  83. </div>
  84. <div class="foot-box"></div>
  85. {% endblock %}
  86.  
  87. <!--实现鼠标滑过导航栏增加active类属性-->
  88. <script>
  89.   $(document).ready(function(){
  90.     $('.nav-link').hover(
  91.       function(){
  92.         $(this).addClass('active');
  93.       },
  94.       function(){
  95.         $(this).removeClass('active');
  96.       }
  97.     );
  98.   });
  99. </script>
  100. </body>
  101. </html>

子文件-继承自index.html

  1. {% extends "index.html" %}
  2. {% block title %}Insert{% endblock %}
  3.  
  4. {% block index %}
  5.  
  6. <!--<form action="/do/" method="post">-->
  7.     <!--姓名：<input type="text" name="username"><br>-->
  8.     <!--年龄：<input type="text" name="userage"><br>-->
  9.     <!--<input type="reset">-->
  10.     <!--<button type="submit">提交</button>-->
  11. <!--</form>-->
  12.  
  13. <div class="container">
  14.     <br>
  15.   <a href="#demo" class="btn btn-primary" data-toggle="collapse">插入新人信息</a>
  16.   <div id="demo" class="collapse">
  17.   <form action="/do/" method="post">
  18.     <div class="form-group">
  19.       <label for="user">Username:</label>
  20.       <input type="text" class="form-control" id="user" name="username" placeholder="Enter Username">
  21.     </div>
  22.     <div class="form-group">
  23.       <label for="age">Userage:</label>
  24.       <input type="password" class="form-control" id="age" name="userage" placeholder="Enter Userage">
  25.     </div>
  26.     <div class="form-check">
  27.       <label class="form-check-label">
  28.         <input class="form-check-input" type="checkbox"> Remember me
  29.       </label>
  30.     </div>
  31.     <button type="submit" class="btn btn-primary">Submit</button>
  32.   </form>
  33.   </div>
  34. </div>
  35.  
  36. {% endblock %}　　

注意！！！

在index.html文件中的

  1.     {% 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. BZOJ 3000(Big Number-Stirling公式求n!近似值)

    3000: Big Number Time Limit: 2 Sec  Memory Limit: 128 MB Submit: 220  Solved: 62 [Submit][Status] De ...

  2. JVM-String常量池与运行时常量池

    Start with JVM 周志明先生著-<深入理解Java虚拟机>,书买回来好几天了,但是最近才准备开始搞一搞了(哭瞎…..).首先是第一章的Java以及JVM发展历史,大概知道了现行 ...

  3. LNK2019: 无法解析的外部符号（函数实现没有加namespace前缀导致）

    问题描述: 在A.h中,我写了如下函数 namespace XXX { void func(); } 在A.cpp中,我写了如下实现 #include "A.h" using na ...

  4. mysql替换成指定字符

    ,,, ), 'XXXX' )-- 隐藏从第四位开始的6个字符,包括第四个字符,替换成X

  5. python学习笔记3----正则表达式

    正则表达式(RE)是通过re模块来实现的. 字符匹配: --普通字符: *大多数字母和字符一般都会和自身匹配. --元字符:. ^ $ * + ? {}  [] \ | () []: 通常用来指定一个 ...

  6. android跨进程通信（IPC）——AIDL

    转载请标明出处: http://blog.csdn.net/sinat_15877283/article/details/51026711: 本文出自: [温利东的博客] 近期在看 @任玉刚 大神编写 ...

  7. dubbo入门使用

    主要参考dubbo官网demo 此处采用zookeeper注册中心进行服务协调管理 真个项目结构如下所示: dcommon : 主要用于定义服务接口, 为dconsumer,dprovider所依赖 ...

  8. Angular js ie 7,8 兼容性

    Angularjs  官网有云: 1)在html 里面 ,有ng-app 的标签里需要定义个id ,id='ng-app'; 2)ie 7及以下版本需要json2.js或json3.js,主要用来解析 ...

  9. ZABBIX监控原理

    zabbix实现原理及架构详解   想要用好zabbix进行监控,那么我们首要需要了解下zabbix这个软件的实现原理及它的架构.建议多阅读官方文档. 一.总体上zabbix的整体架构如下图所示: 重 ...

  10. jQuery DataTables添加自定义多个搜索条件

    效果如下: 一.在前台页面定义输入搜索条件的文本框 <div class="ibox-tools"> <span>年度</span> @Html ...