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. jade总结

    随着时间的迁移,要跟官方api相匹配   jade的缺点 1.可移植性差 2.调试困难 3.性能不是非常出色(不是为性能设计,可以使用dot, http://olado.github.io/) 选择的 ...

  2. ubuntu---记录.简单一句话安装tf

    卸载 sudo pip3 uninstall tensorflow sudo pip3 uninstall tensorflow-gpu sudo pip3 uninstall tensorflow- ...

  3. YOLO---近段时间的练习目标

    YOLO---近段时间的练习目标 yolo(darknet)官方主页:https://pjreddie.com/darknet/yolo/   和在学校时用的不太一样了,有更新了- 还有一个常用版本: ...

  4. 极光推送出现 超时问题:Connect timeout. Please retry later. Error:7

    检查之后均没有什么太大的问题, 最后发现出现77这种错误码,有一种可能就是系统的ca包没有更新 包名为 ca-certificates 使用命令 yum install ca-certificates ...

  5. Controllers返回View的一个完整流程

    详细说明一个MVC框架下,返回一个view的原理.如下图: 上图粗略的说明了一个返回View的流程,细节如下: 1.定义Model类: 2.定义接口添加接口约束为class: 3.定义接口实现类,即对 ...

  6. C语言实现的文件交互

    计算机与外部设备的交互依靠文件完成 文件是记录在外部介质上的数据的集合:例如1.c 是源码 1.exe可执行的文件 文件的分类 按组织结构: 记录文件:有一定结构的文件,可以解析成字段值的文件: 流式 ...

  7. centos7.0利用yum快速安装mysql8.0

    我这里直接使用MySQL Yum存储库的方式快速安装: 抽象 MySQL Yum存储库提供用于在Linux平台上安装MySQL服务器,客户端和其他组件的RPM包.这些软件包还可以升级和替换从Linux ...

  8. 成熟度等级CMM

    软件能力成熟度模型 (Capability maturity model,CMM) CMM是目前国际上使用流行的一种软件生产过程行业标准模型,可定义.评价软件开发过程的成熟度,并提供提高软件质量的指导 ...

  9. vs 2017 无法安装任何 nuget package,提示“库没有注册。。。”

    vs 2017 无法安装任何 nuget package,提示“库没有注册(异常来自 HRESULT: 0x8002801D (TYPE_E_LIBNOTREGISTERED))” 各种百度谷歌都没有 ...

  10. P4149 [IOI2011]Race 点分治

    思路: 点分治 提交:5次 题解: 刚开始用排序+双指针写的,但是调了一晚上,总是有两个点过不了,第二天发现原因是排序时的\(cmp\)函数写错了:如果对于路径长度相同的,我们从小往大按边数排序,当双 ...