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之加载静态资源的更多相关文章

  1. flask模板应用-加载静态文件:添加Favicon,使用CSS框架,使用宏加载静态资源

    加载静态文件 一个Web项目不仅需要HTML模板,还需要许多静态文件,比如CSS.JavaScript文件.图片和声音声.在flask程序中,默认需要将静态文件存储在与主脚本(包含程序实例的脚本)同级 ...

  2. 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(). ...

  3. Thymeleaf模板引擎绕过浏览器缓存加载静态资源js,css文件

    浏览器会缓存相同文件名的css样式表或者javascript文件.这给我们调试带来了障碍,好多时候修改的代码不能在浏览器正确显示. 静态常见的加载代码如下: <link rel="st ...

  4. nginx反向代理部署springboot项目报404无法加载静态资源

    问题:nginx反向代理部署springboot项目报404无法加载静态资源(css,js,jpg,png...) springboot默认启动端口为8080,如果需要通过域名(不加端口号)直接访问s ...

  5. 关于springboot2.*版本无法加载静态资源

    前言 在学习springboot的过程中,发现无法引用静态资源.我使用的是springboot2.2.1版本. 追溯源码,终于解决.并记录下解决思路. 默认加载路径 首先得知道springboot默认 ...

  6. 页面性能优化:preload预加载静态资源

    本文主要介绍preload的使用,以及与prefetch的区别.然后会聊聊浏览器的加载优先级. preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执 ...

  7. Spring 加载静态资源

    <mvc:default-servlet-handler/> JSP 中通过标签加载js文件或者link标签加载css文件等静态资源时要在springmvc的xml文件中配置以上设置请求就 ...

  8. Tomcat 部署项目无法加载静态资源

    首先,我的Eclipse是引用外部的Tomcat 引用外部Tomcat会在左侧生成一个Server文件夹,相当于复制了一份Tomcat到Eclipse的安装目录里 具体Tomcat所在目录可以在这进行 ...

  9. django模板加载静态资源

    1. 目录结构 /mysite/setting.py部分配置: # Django settings for mysite project. import os.path TEMPLATE_DIRS = ...

随机推荐

  1. c# 选择结构

  2. C++——namespace

    scope和namespace scope就是我们常说的作用域,namespace是C++引入的一个关键字.这两种都和作用域有些微妙的联系,下面 引自Global scope vs global na ...

  3. [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 ...

  4. 接口自动化平台搭建(四),自动化项目Jenkins持续集成

    一.Jenkins的优点 1.传统网站部署流程   一般网站部署的流程 这边是完整流程而不是简化的流程 需求分析—原型设计—开发代码—内网部署-提交测试—确认上线—备份数据—外网更新-最终测试 ,如果 ...

  5. 拒绝流量劫持,全面使用 HTTPS!

    最近收到数个 BootCDN 用户的反馈:某些地区的宽带运营商劫持了部分 BootCDN 上的文件,并篡改文件加入了广告代码. 这种方式的流量劫持属于中间人攻击(Man-in-the-Middle A ...

  6. css选择器学习(二)属性选择器

    属性选择器 /*******************************************css2中的属性选择器*************************************** ...

  7. Luogu P4270 [USACO18FEB]Cow Gymnasts (打表找规律)

    题意 传送门 题解 首先我们不竖着看奶牛而是横着看.从下往上把奶牛叫做处于第0,1,2...0,1,2...0,1,2...层.那么相当于第000层的不动,第111层的平移一格,第222层的平移222 ...

  8. springAop Schedule,注解annotation 实现任务监控

    我们有很多定时任务在任务工程中执行,但是如果我们不加以监控,很有可能定时任务死掉或者卡住我们都不知道. 所以需要做一个任务监控.监控任务当前执行的状态. 还是那样,先让定时任务启动起来,当前我们使用的 ...

  9. 将vim打造成python开发工具

    1.创建vim插件工作目录 [root@ray ~]# mkdir -p ~/.vim/bundle 2.下载插件 [root@ray ~]# cd ~/.vim/bundle [root@ray b ...

  10. Win内核原理与实现学习笔记3-windows系统结构

    1.概述 1.1windows采用了双模式(dual mode)结构来保护操作系统本身,以避免被应用程序的错误而波及.操作系统核心运行在内核模式(kernel mode)下,应用程序的代码运行在用户模 ...