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根路径下进行索引,故需要加"/",此坑难发现,还需多学习。

 

  

原文地址:https://www.cnblogs.com/phyger/p/9480672.html

时间: 2024-09-29 22:14:17

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

[py]django模板继承

参考 django模板继承 通过搞一个base.html 这个base.html可以包含两类 block片断 其他html 然后index.html继承base.html 继承关系如图 代码体现template继承 关键字 - 预设片断模板- 留坑 {% block title %} 默认标题 {% endblock %} - 预包含html文件 {% include 'nav.html' %} - index.html继承base.html {% extends 'base.html' %}

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

django模板继承  --20180123 a.include 模板标签 b.extend(继承)模板标签 ------include 模板标签 该标签允许在(模板中)包含其它的模板的内容. 标签的参数是所要包含的模板名称,可以是一个变量,也可以是用单/双引号硬编码的字符串. 每当在多个模板中出现相同的代码时,就应该考虑是否要使用 {% include %} 来减少重复. ------extend(继承)模板标签 先构造一个基础框架模板,而后在其子模板中对它所包含站点公用部分和定义块进行重载.

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

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

ajax读取图片后排列问题(先加载完图片再排列)

网上找了个瀑布流的图片排列插件.从数据库读取图片路径后显示时出现了位置重叠问题. 1 $.ajax({ 2 type: "POST", 3 url: "index.aspx", 4 data: { 'action': 'SelectImage'}, 5 dataType: "json", 6 success: function (result) { 7 var imgpanel = $("#imgitem"); 8 var i

Android新浪微博客户端(七)——ListView中的图片异步加载、缓存

原文出自:方杰|http://fangjie.sinaapp.com/?p=193转载请注明出处 最终效果演示:http://fangjie.sinaapp.com/?page_id=54该项目代码已经放到github:https://github.com/JayFang1993/SinaWeibo 一.ListView的图片异步加载 我们都知道对每一个Weibo Item都有用户头像,而且每一条微博还可能带有图片.如果在加载列表的同时加载图片,这样有几个缺点,第一很费事,界面卡住,用户体验很不

Android图片异步加载框架Universal Image Loader的源码分析

项目地址:https://github.com/nostra13/android-universal-image-loader 1. 功能介绍 1.1 Android Universal Image Loader Android Universal Image Loader 是一个强大的.可高度定制的图片缓存,本文简称为UIL. 简单的说 UIL 就做了一件事--获取图片并显示在相应的控件上. 1.2 基本使用 1.2.1 初始化 添加完依赖后在Application或Activity中初始化I

Android ListView 图片异步加载和图片内存缓存

开发Android应用经常需要处理图片的加载问题.因为图片一般都是存放在服务器端,需要联网去加载,而这又是一个比较耗时的过程,所以Android中都是通过开启一个异步线程去加载.为了增加用户体验,给用户省流量,一般把加载完的图片先缓存下来,下次加载的时候就不需要再联网去服务器端加载.图片缓存一般分为一级缓存(即内存缓存)和二级缓存(即磁盘缓存).这里只讲一级缓存. 内存缓存就是把加载完的图片先放在手机内存中,等下次加载的时候再从内存中取出来. 优点是速度快,缺点是不能长久保存,用户退出应用程序之

Android图片异步加载框架Android-Universal-Image-Loader

Android-Universal-Image-Loader是一个图片异步加载,缓存和显示的框架.这个框架已经被很多开发者所使用,是最常用的几个Android开源项目之一,主流的应用,随便反编译几个,都可以见到它的身影.淘宝,天猫,Facebook,京东商城等都用到了这个项目. 该项目的Github地址链接:https://github.com/nostra13/Android-Universal-Image-Loader 运行流程: 每一个图片的加载和显示任务都运行在独立的线程中,除非这个图片

再和“面向对象”谈恋爱 - 图片预加载组件(七)

再和"面向对象"谈恋爱 - 对象简介(一)再和"面向对象"谈恋爱 - 对象相关概念(二)再和"面向对象"谈恋爱 - 面向对象编程概念(三)再和"面向对象"谈恋爱 - class(四)再和"面向对象"谈恋爱 - 继承(五)再和"面向对象"谈恋爱 - super(六) 通过前面的六篇文章已经把ES6的面向对象跟大伙说清楚了,大家最关心的应该是来个例子实战一下,别担心自行车都会有.那这篇文章通