Flask之加载静态资源
Flask之加载静态资源
1.加载css样式
<link rel="stylesheet" href="{{ url_for('static',filename='css/img.css',_external=True) }}">
2.加载js脚本
<script rel="stylesheet" src="{{ url_for('static',filename='js/img.js') }}"></script>
3.加载图片
<img src="{{ url_for('static',filename='img/g2.jpg' )}}">
4.修改页面title位置的图标
<link rel="icon" type="image/x-icon" href="{{ url_for('static',filename='favicon.ico') }}" />
flask的静态文件,一般放在static目录下,前端页面放在templates下(而且这两个名字是flask框架内部定义的(static,templates)(也可以修改)),目录结构如图:

模板(index.html)里加载静态文件的路径也要改下,原模板路径如下:
<img src="img/6.jpg" alt="">
改为:
<img src="static/img/6.jpg" alt="">
css和js同理。
Flask之加载静态资源的更多相关文章
- flask模板应用-加载静态文件:添加Favicon,使用CSS框架,使用宏加载静态资源
加载静态文件 一个Web项目不仅需要HTML模板,还需要许多静态文件,比如CSS.JavaScript文件.图片和声音声.在flask程序中,默认需要将静态文件存储在与主脚本(包含程序实例的脚本)同级 ...
- Django的urls.py加载静态资源图片,TypeError: view must be a callable or a list/tuple in the case of include().
Django的urls.py加载静态资源图片,TypeError: view must be a callable or a list/tuple in the case of include(). ...
- Thymeleaf模板引擎绕过浏览器缓存加载静态资源js,css文件
浏览器会缓存相同文件名的css样式表或者javascript文件.这给我们调试带来了障碍,好多时候修改的代码不能在浏览器正确显示. 静态常见的加载代码如下: <link rel="st ...
- nginx反向代理部署springboot项目报404无法加载静态资源
问题:nginx反向代理部署springboot项目报404无法加载静态资源(css,js,jpg,png...) springboot默认启动端口为8080,如果需要通过域名(不加端口号)直接访问s ...
- 关于springboot2.*版本无法加载静态资源
前言 在学习springboot的过程中,发现无法引用静态资源.我使用的是springboot2.2.1版本. 追溯源码,终于解决.并记录下解决思路. 默认加载路径 首先得知道springboot默认 ...
- 页面性能优化:preload预加载静态资源
本文主要介绍preload的使用,以及与prefetch的区别.然后会聊聊浏览器的加载优先级. preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执 ...
- Spring 加载静态资源
<mvc:default-servlet-handler/> JSP 中通过标签加载js文件或者link标签加载css文件等静态资源时要在springmvc的xml文件中配置以上设置请求就 ...
- Tomcat 部署项目无法加载静态资源
首先,我的Eclipse是引用外部的Tomcat 引用外部Tomcat会在左侧生成一个Server文件夹,相当于复制了一份Tomcat到Eclipse的安装目录里 具体Tomcat所在目录可以在这进行 ...
- django模板加载静态资源
1. 目录结构 /mysite/setting.py部分配置: # Django settings for mysite project. import os.path TEMPLATE_DIRS = ...
随机推荐
- c# 选择结构
- C++——namespace
scope和namespace scope就是我们常说的作用域,namespace是C++引入的一个关键字.这两种都和作用域有些微妙的联系,下面 引自Global scope vs global na ...
- [USACO07MAR]面对正确的方式Face The Right Way
题目概括 题目描述 Farmer John has arranged his N (1 ≤ N ≤ 5,000) cows in a row and many of them are facing f ...
- 接口自动化平台搭建(四),自动化项目Jenkins持续集成
一.Jenkins的优点 1.传统网站部署流程 一般网站部署的流程 这边是完整流程而不是简化的流程 需求分析—原型设计—开发代码—内网部署-提交测试—确认上线—备份数据—外网更新-最终测试 ,如果 ...
- 拒绝流量劫持,全面使用 HTTPS!
最近收到数个 BootCDN 用户的反馈:某些地区的宽带运营商劫持了部分 BootCDN 上的文件,并篡改文件加入了广告代码. 这种方式的流量劫持属于中间人攻击(Man-in-the-Middle A ...
- css选择器学习(二)属性选择器
属性选择器 /*******************************************css2中的属性选择器*************************************** ...
- Luogu P4270 [USACO18FEB]Cow Gymnasts (打表找规律)
题意 传送门 题解 首先我们不竖着看奶牛而是横着看.从下往上把奶牛叫做处于第0,1,2...0,1,2...0,1,2...层.那么相当于第000层的不动,第111层的平移一格,第222层的平移222 ...
- springAop Schedule,注解annotation 实现任务监控
我们有很多定时任务在任务工程中执行,但是如果我们不加以监控,很有可能定时任务死掉或者卡住我们都不知道. 所以需要做一个任务监控.监控任务当前执行的状态. 还是那样,先让定时任务启动起来,当前我们使用的 ...
- 将vim打造成python开发工具
1.创建vim插件工作目录 [root@ray ~]# mkdir -p ~/.vim/bundle 2.下载插件 [root@ray ~]# cd ~/.vim/bundle [root@ray b ...
- Win内核原理与实现学习笔记3-windows系统结构
1.概述 1.1windows采用了双模式(dual mode)结构来保护操作系统本身,以避免被应用程序的错误而波及.操作系统核心运行在内核模式(kernel mode)下,应用程序的代码运行在用户模 ...