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基础 str while+iter+next 字符串的遍历

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

  2. Linux内核分析--内核中的数据结构双向链表【转】

    本文转自:http://blog.csdn.net/yusiguyuan/article/details/19840065 一.首先介绍内核中链表 内核中定义的链表是双向链表,在上篇文章--libev ...

  3. luogu P4396 [AHOI2013]作业

    目录 题目 思路 错误&&傻叉 代码 题目 luogu 思路 每次都是插入比之前所有数字大的数,所以之前的答案就不会改变 用fhq-treap求出原序列,然后用树状数组依次算出每个值得 ...

  4. NSwag enum

    https://github.com/RSuter/NJsonSchema/wiki/JsonSchemaGenerator#integer-vs-string-enumerations Intege ...

  5. 51nod 1083 矩阵取数问题

    就很简单很简单的dp 只能从右或者从下走 所以  dp方程直接看下面公式吧  反正也不难 #include<bits/stdc++.h> using namespace std; ; in ...

  6. 论文笔记之：Dynamic Label Propagation for Semi-supervised Multi-class Multi-label Classification ICCV 2013

    Dynamic Label Propagation for Semi-supervised Multi-class Multi-label Classification ICCV 2013 在基于Gr ...

  7. struts框架的运行原理和流程

    从此图中简单描述一下struts2的运行流程:1.客户端请求一个HttpServletRequest的请求,如在浏览器中输入http://localhost: 8080/bookcode/Reg.ac ...

  8. 用jQuery实现ajax总结以及跨域问题

    本文为作者原创,未经博主允许,不可转载 ajax请求的常用的参数设置: type:请求类型,"POST","GET",默认为geturl:发送请求的地址data ...

  9. # WinForm关闭窗体确认

    private void Lba_IE_Form_FormClosing(object sender, FormClosingEventArgs e) { if (MessageBox.Show(&q ...

  10. python 加密与解密

    加密算法分类 对称加密算法: 对称加密采用了对称密码编码技术,它的特点是文件加密和解密使用相同的密钥 发送方和接收方需要持有同一把密钥,发送消息和接收消息均使用该密钥. 相对于非对称加密,对称加密具有 ...