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 = ...
随机推荐
- jade总结
随着时间的迁移,要跟官方api相匹配 jade的缺点 1.可移植性差 2.调试困难 3.性能不是非常出色(不是为性能设计,可以使用dot, http://olado.github.io/) 选择的 ...
- ubuntu---记录.简单一句话安装tf
卸载 sudo pip3 uninstall tensorflow sudo pip3 uninstall tensorflow-gpu sudo pip3 uninstall tensorflow- ...
- YOLO---近段时间的练习目标
YOLO---近段时间的练习目标 yolo(darknet)官方主页:https://pjreddie.com/darknet/yolo/ 和在学校时用的不太一样了,有更新了- 还有一个常用版本: ...
- 极光推送出现 超时问题:Connect timeout. Please retry later. Error:7
检查之后均没有什么太大的问题, 最后发现出现77这种错误码,有一种可能就是系统的ca包没有更新 包名为 ca-certificates 使用命令 yum install ca-certificates ...
- Controllers返回View的一个完整流程
详细说明一个MVC框架下,返回一个view的原理.如下图: 上图粗略的说明了一个返回View的流程,细节如下: 1.定义Model类: 2.定义接口添加接口约束为class: 3.定义接口实现类,即对 ...
- C语言实现的文件交互
计算机与外部设备的交互依靠文件完成 文件是记录在外部介质上的数据的集合:例如1.c 是源码 1.exe可执行的文件 文件的分类 按组织结构: 记录文件:有一定结构的文件,可以解析成字段值的文件: 流式 ...
- centos7.0利用yum快速安装mysql8.0
我这里直接使用MySQL Yum存储库的方式快速安装: 抽象 MySQL Yum存储库提供用于在Linux平台上安装MySQL服务器,客户端和其他组件的RPM包.这些软件包还可以升级和替换从Linux ...
- 成熟度等级CMM
软件能力成熟度模型 (Capability maturity model,CMM) CMM是目前国际上使用流行的一种软件生产过程行业标准模型,可定义.评价软件开发过程的成熟度,并提供提高软件质量的指导 ...
- vs 2017 无法安装任何 nuget package,提示“库没有注册。。。”
vs 2017 无法安装任何 nuget package,提示“库没有注册(异常来自 HRESULT: 0x8002801D (TYPE_E_LIBNOTREGISTERED))” 各种百度谷歌都没有 ...
- P4149 [IOI2011]Race 点分治
思路: 点分治 提交:5次 题解: 刚开始用排序+双指针写的,但是调了一晚上,总是有两个点过不了,第二天发现原因是排序时的\(cmp\)函数写错了:如果对于路径长度相同的,我们从小往大按边数排序,当双 ...