Project name ：Flask_Plan

templates：

默认设置下，Flask在程序根目录中名为static的子目录中寻找静态文件。

随便找个图片放进去把，命令test.png

Flask_Plan/static/test.png

修改模板文件Flask_Plan/templates/plan.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h1>这是计划页面</h1>

<img src="{{ url_for('static', filename='test.png') }}">

</body>

</html>
模板文件中使用
{{ url_for('static', filename='test.png') }}

来表示static目录下的test.png

当然我们也要引用更多的静态文件。

templates建立文件夹分类管理吧。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <!-- Bootstrap -->

    <link href="{{ url_for('static', filename='css/bootstrap.css')}}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

     <script src="{{ url_for('static', filename='js/html5shiv.min.js') }}"></script>

     <script src="{{ url_for('static', filename='js/respond.min.js') }}"></script>

    <![endif]-->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>

</head>

<body>

<h1>这是计划页面</h1>

<img src="{{ url_for('static', filename='test.png') }}">

</body>

</html>

我下载了jquery bootstrap，并且引入。

Flask初级（四）flash在模板中使用静态文件的更多相关文章

  1. Django（五）在模板中使用静态文件

    location 最后一个文件夹名就是project名,我用了Django_Plan. Application 是自动加入的APP名字,我用了Plan 静态文件相关配置: Django_Plan\se ...

  2. Django模板变量及静态文件引用

    一.模板变量传递 1.视图向模板传递变量 视图中的列表,数组,字典,函数均可以传递给模板 在视图中定义变量通过render(content{‘name’ : value})传递给模板 模板通过{{  ...

  3. Django框架（二）—— 基本配置：app注册、模板配置、静态文件配置、数据库连接配置post和get

    目录 app注册.模板配置.静态文件配置.数据库连接配置post和get 一.app 二.模板配置 三.静态文件配置 四.数据库连接配置 五.get请求和post请求 六.新手三件套 七.登录功能案例 ...

  4. Django中对静态文件的支持（转）

    英文原文:[http://agiliq.com/blog/2013/03/serving-static-files-in-django/] 译文:[http://segmentfault.com/a/ ...

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

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

  6. （5）ASP.NET Core 中的静态文件

    1.前言 当我们创建Core项目的时候,Web根目录下会有个wwwroot文件目录,wwwroot文件目录里面默认有HTML.CSS.IMG.JavaScript等文件,而这些文件都是Core提供给客 ...

  7. day52_9_16Django中的静态文件和orm

    一.静态文件配置 在配置静态文件时,需要创建一个文件夹在Django项目文件夹下,名字与使用无关. 静态文件包括html等使用的不会变动的插件文件等.分为三个部分: css文件夹 当前网站所有的样式文 ...

  8. Asp.Net Core 中的静态文件

    Asp.Net Core 中的静态文件 在这节中我们将讨论如何使 ASP.NET Core 应用程序,支持静态文件,如 HTML,图像,CSS 和 JavaScript 文件. 静态文件 默认情况下, ...

  9. django中的静态文件

    静态文件 1.什么是静态文件 在django中静态文件是指那些图片.css样式.js样式.视频.音频等静态资源. 2.为什么要配置静态文件 这些静态文件往往不需要频繁的进行变动,如果我们将这些静态文件 ...

随机推荐

  1. Python3基础 list 查看filter()返回的对象

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  2. 常用模块之 time,datetime,random,os,sys

    time与datetime模块 先认识几个python中关于时间的名词: 时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.我们运行“ty ...

  3. 项目中同一个dll的x86和x64同时引用

    <ItemGroup Condition=" '$(Platform)' == 'x86' "> <Reference Include="System. ...

  4. java 监控工具 jconsole

    如图

  5. triggerHandler不执行事件默认值

    <input type="text" /> $('input').triggerHandler('focus');

  6. BZOJ 1010: [HNOI2008]玩具装箱toy（斜率优化dp）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1010 题意: 思路: 容易得到朴素的递归方程:$dp(i)=min(dp(i),dp(k)+(i-k ...

  7. Linux批量更改文件后缀-转载

    一.rename解决 1.  Ubuntu系统下 rename 's//.c//.h/'  ./* 把当前目录下的后缀名为.c的文件更改为.h的文件 2.  CentOS5.5系统下 rename . ...

  8. Django内置模板标签

    Django内置标签总览 可以查询下表来总览Django的内置标签: 标签 说明 autoescape 自动转义开关 block 块引用 comment 注释 csrf_token CSRF令牌 cy ...

  9. 《剑指offer》第六题（重要！从尾到头打印链表）

    文件main.cpp // 从尾到头打印链表 // 题目:输入一个链表的头结点,从尾到头反过来打印出每个结点的值. #include <iostream> #include <sta ...

  10. 【Golang 接口自动化07】struct转map的三种方式

    背景 我们在前面介绍过怎么使用net/http发送json或者map数据,那么它能不能直接发送结构体数据呢?我们今天一起来学习结构体struct转map的三种方法,为后续做铺垫. struct转map ...