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. BZOJ1304: [CQOI2009]叶子的染色 树形dp

    Description 给一棵m个结点的无根树,你可以选择一个度数大于1的结点作为根,然后给一些结点(根.内部结点和叶子均可)着以黑色或白色.你的着色方案应该保证根结点到每个叶子的简单路径上都至少包含 ...

  2. bootstrap datarangepicker如何使用

    本文为博主原创,未经允许不得转载: 下载资源文件: 地址:Github:https://github.com/dangrossman/bootstrap-daterangepicker/ 1.页面引用 ...

  3. spring实现定时任务的两种方式

    本文为博主原创,未经允许不得转载 项目中要经常事项定时功能,在网上学习了下用spring的定时功能,基本有两种方式,在这里进行简单的总结, 以供后续参考,此篇只做简单的应用. 1.在spring-se ...

  4. HDU 6083 度度熊的午饭时光（01背包+记录路径）

    http://acm.hdu.edu.cn/showproblem.php?pid=6083 题意: 思路: 01背包+路径记录. 题目有点坑,我一开始逆序枚举菜品,然后一直WA,可能这样的话路径记录 ...

  5. C# asp.net 比较两个时间的差求天数

    string str1 = "2017-2-13 23:59:59"; string str2 = "2017-2-14 0:00:01"; DateTime ...

  6. React Native 之轮播图swiper组件

    注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...

  7. BZOJ 2669 【CQOI2012】 局部极小值

    题目链接:局部极小值 这是一道\(dp\)好题. 由于需要保证某些位置比周围都要小,那么我们可以从小到大把每个数依次填入,保证每个局部极小值填入之前周围都不能填,就只需要在加入的时候计数了. 由于局部 ...

  8. mybatis generator插件系列--lombok插件 （减少百分之九十bean代码）

    经常使用mybatis generator生成代码的你 有没有因为生成的getter/setter而烦恼呢? 有没有生成后又手动加toString/hashCode/Equals方法呢? 有没有改一个 ...

  9. python 集合并集

    #Union setx = set(["green", "blue"]) sety = set(["blue", "yellow& ...

  10. Java编程语言下 Selenium 驱动各个浏览器代码

    这里采用的是Selenium3.7版本,首先介绍的是在Windows环境下运行的: 总结下注意事项: 1,设置各个浏览器的Driver路径 System.setProperty("" ...