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. window下redis的安装和使用

    1.下载及安装redis 下载地址:https://github.com/dmajkic/redis/downloads 找到对应的版本下载安装 打开cmd窗口,用cd命令进入到安装redis的根目录 ...

  2. django 搜索引擎 Elasticsearch 安装使用

    1.使用docker安装elasticsearch a.获取镜像 # 拉取镜像到本地仓库 # docker image pull delron/elasticsearch-ik:2.4.6-1.0 由 ...

  3. PAT1046

    题目链接 https://pintia.cn/problem-sets/994805260223102976/problems/994805277847568384 题解 题目有几个点需要注意: 甲和 ...

  4. jquery动态背景切换全屏登录插件supersized.js

    下载地址:https://download.csdn.net/download/t101lian/10434198预览: http://www.daimabiji.com/codedemo/1530 ...

  5. Selenium(九)测试用例数据分离与从文件导入数据

    一.测试用例数据与代码分离 1.从之前的脚本来看,我还是把数据写在了脚本中,这样脚本的通用性很差.全局的数据其实可以从数据库.文本文件.Excel中直接读取. 2.代码和用户数据分离: 3.数据设计- ...

  6. .NET Core 3全新来袭!DevExpress Winforms v19.2支持High DPI

    DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.无论是Office风格的界面,还是分析处理大批量的业务数据,DevExpr ...

  7. JQuery实践--插件

    jQuery插件的概览http://docs.jquery.com/Pluginshttp://jquery.com/plugins/most_popular 官方的表单插件http://jquery ...

  8. PHP实现页面跳转功能

    PHP跳转到指定页面的问题通常都会建设网站需求上看到,比如我们需要从一个页面跳转到另一个页面来实现某个功能或者效果.其实在PHP中进行页面跳转是有多种方法的,那么这篇文章就给大家介绍下,有哪些方法可以 ...

  9. BigDecimal 3个toString()方法区别

    BigDecimal 的toEngineeringString.toPlainString和toString方法的区别: toEngineeringString:有必要时使用工程计数法.工程记数法是一 ...

  10. moment.js 日期转换工具

    官方网站: http://momentjs.cn/ 文档: https://itbilu.com/nodejs/npm/4Jxk-Ti-l.html https://www.jianshu.com/p ...