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. VS中 Winform查看窗体内控件之间的相互关系

    视图----其他窗口----文档大纲 这样可以查看之前的窗体布局关系

  2. com.mysql.jdbc.PacketTooBigException,及mysql 设置 max_allow_packet

    本文为博主原创,未经允许不得转载: 在进行批量导入表格数据入库操作时,报了以下错误: 错误分析: mysql根据配置文件会限制server接受的数据包大小.有时候大的插入和更新会受max_allowe ...

  3. Ubuntu 14.04 安装 qemu

    参考: Ubuntu 12.04之找不到Qemu命令 Ubuntu 14.04 安装 qemu 安装: sudo apt-get install qemu 使用ln命令建立软连接: sudo ln - ...

  4. vim E437: terminal capability "cm" required

    报错E437: terminal capability "cm" required 解决方法:# export TERM=xterm

  5. bzoj 3289: Mato的文件管理 莫队+树状数组

    3289: Mato的文件管理 Time Limit: 40 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description Mato同学 ...

  6. hdu 3706 Second My Problem First 单调队列

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3706 Second My Problem First Time Limit: 12000/4000 M ...

  7. python3.7 安装pyqt5

    pip install pyqt5

  8. [原][OSG]整理osg渲染一帧的流程

    参考:最长的一帧 先看下frame void ViewerBase::frame(double simulationTime) { advance(simulationTime);//记录仿真时间,帧 ...

  9. Java8 Lambda代码备份

    简单研究了一下,贴出来,相当于笔记 import java.lang.reflect.*; import java.util.ArrayList; import java.util.List; imp ...

  10. 一个Java例子，解释清楚注解的作用

    原文出处:码农登陆 写在前面 今天聊的是注解,但其实单纯说注解,注解本身没有任何的作用.简单说和注释没啥区别,而它有作用的原因是:注解解释类,也就是相关对代码进行解释的特定类.一般这些类使用反射是可以 ...