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 format 位置参数与关键字参数

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

  2. ADT Bundle下载和安装

    下载官方adt集成包(即ADT Bundle)并安装. Android官方已经推出adt集成包,包含了eclipse.sdk和SDK Manager,只需解压出来,然后就能运行Eclipse. 官方集 ...

  3. SPOJ ADAFIELD Ada and Field（STL的使用：set，multiset，map的迭代器）题解

    题意:n*m的方格,“0 x”表示x轴在x位置切一刀,“0 y”表示y轴在y位置切一刀,每次操作后输出当前面积最大矩形. 思路:用set分别储存x轴y轴分割的点,用multiset(可重复)储存x轴y ...

  4. 【基础知识】ActiveMQ基本原理

    “来,根据你的了解说下 ActiveMQ 是什么.” “这个简单,ActiveMQ 是一个 MOM,具体来说是一个实现了 JMS 规范的系统间远程通信的消息代理.它……” “等等,先解释下什么是 MO ...

  5. [Java] - MySQL数据库的时间设置问题.

    之前有朋友做的项目时间格式设置为String,我感觉很不好,随后自己试了试. 首先在设置数据库类型时,选择的是timestamp, 而Java的实体中设置时间的属性类型为Date, (java.uti ...

  6. Asp.net自定义单选复选框控件

    将常用的jquery插件封装成控件也是个不错的选择 下面是效果的简单颜色,由于博客系统的限制没法完整演示最终效果,请下载示例查看 Asp.netWeb APIC#Javascript   1.新建类库 ...

  7. UVa 10954 全部相加（Huffman编码）

    https://vjudge.net/problem/UVA-10954 题意:有n个数的集合S,每次可以从S中删除两个数,然后把它们的和放回集合,直到剩下一个数.每次操作的开销等于删除的两个数之和, ...

  8. 卸载 mysql

    sudo apt-get remove mysql-* dpkg -l |grep ^rc|awk '{print $2}' |sudo xargs dpkg -P 之后会跳出一个弹框点击“是”就行了

  9. ubuntu14.04 设置开机自启动脚本

    方法1.将脚本放入/etc/rc.local文件中. 方法2.添加一个ubuntu的开机启动服务 分为以下几个步骤: 1)新建一个脚本文件 new_services.sh #!/bin/bash # ...

  10. MongoDB（课时6 关系查询）

    支持关系查询操作:大于($gt),小于($lt),大于等于($gte),小于等于($lte),不等于($ne ),等于(key:value 或 $eq).想让这些操作正常使用,需要准备一个数据集合. ...