如果使用前后台不分离的开发方式,那么模板文件中使用的静态文件,比如css/js等文件的目录需要在后台进行配置,以便模板渲染是能正确读到这些静态文件。那么我们应该如何处理呢。

首先安装依赖

pip install aiofiles

我们看下如何使用

我们去定义一个页面,展示我们对应的一张图片。

我们看下代码如何实现

1.创建两个目templates和static

2.分别去放置一个文件test.png和home.html

home.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <img src="{{ url_for('static',path='/test.png') }}" style="width: 100px;height: 100px"> </body>
</html>

3. 我们看下如何在fastapi中使用

from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from fastapi import FastAPI, Request
app = FastAPI() templates = Jinja2Templates(directory="./templates") app.mount("/static", StaticFiles(directory="./static"), name="static") @app.get("/")
def home(request: Request):
return templates.TemplateResponse(
"home.html",
{
"request": request
}
)

通过mount将StaticFiles实例挂载到一个特定的路径上。其中StaticFile类中传递的directory参数是项目中静态文件的目录。

然后我们启动下。访问下看看效果

我们已经实现我们设计的效果,很简单。

文章首发在公众号,欢迎关注。

FastAPI 学习之路(三十八)Static Files的更多相关文章

  1. FastAPI 学习之路(十八)表单与文件

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  2. 学习之路三十八:Hook(钩子)的学习

    好久没写文章了,还记得年前面试了一家公司,为了检测一下我的学习能力,给了我一个任务,做一个自动登录并自动操作菜单的程序. 花了几天的时间研究了Hook以及使用WindowsAPI操作程序的知识,现在记 ...

  3. 学习之路三十九:新手学习 - Windows API

    来到了新公司,一开始就要做个程序去获取另外一个程序里的数据,哇,挑战性很大. 经过两周的学习,终于搞定,主要还是对Windows API有了更多的了解. 文中所有的消息常量,API,结构体都整理出来了 ...

  4. FastAPI 学习之路(十九)处理错误

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  5. FastAPI 学习之路(十二)接口几个额外信息和额外数据类型

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  6. FastAPI 学习之路(十四)响应模型

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  7. FastAPI 学习之路(十五)响应状态码

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  8. FastAPI 学习之路(十六)Form表单

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  9. FastAPI 学习之路(十)请求体的字段

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  10. Python小白学习之路(十八)—【内置函数三】

    一.对象操作 help() 功能:返回目标对象的帮助信息 举例: print(help(input)) #执行结果 Help on built-in function input in module ...

随机推荐

  1. Git:git commit时退出报错解决(Error45、Error325)

    Git 报错 在输入git commit编辑注释日志时强制退出git程式,文件会变成只读文件,于是出现下述报错: 解决方法(ERROR45) 我们提交代码的正常操作流程一般是: 输入git commi ...

  2. this关键字的理解

    this理解为:当前对象 或 当前正在创建的对象 this代表所在类的当前对象的引用(地址值),即对象对自己的引用. 备注:意思方法被那个对象调用,方法中的this就代表那个对象.即谁调用,this就 ...

  3. 数据库实验sql代码 myemployees 以及mygirl

    /* Navicat Premium Data Transfer Source Server : mysql Source Server Type : MySQL Source Server Vers ...

  4. 在windows中给git修改默认的编辑器为sublime

    首先,需要配置sublime的为环境变量,这是为了让git能通过命令调用sublime.也可以写一个.bat脚本.然后,让git调用bat脚本也可以 配置环境变量path到subl.exe的目录 脚本 ...

  5. Mac下Sublime Text3配置Python开发环境

    设置Sublime Text的语法为python View -> syntax ->python 设置编译环境(默认python版本2.7) Tools -> Build Syste ...

  6. mybatis零碎

    <           <    小于号 >          >    大于号 &     &        和 &apos;     '     单 ...

  7. 记一次docker compose的低级错误

    记一次docker compose的低级错误 问题 ​ 今天在学习dockercompose的时候,启动docker compose up,结果却出现异常 Error response from da ...

  8. 华为云计算IE面试笔记-FusionCompute上的虚拟机A和虚拟机B不能正常通信,请描述可能的故障点和排除方法(分析虚拟机A和虚拟机B不通)

    *快速定位故障点:(考到) ARP:同一二层内可以通过ARP -a命令查询到要访问的主机IP(ARP表项中记录了同一二层中的IP和MAC的对应关系),若查询不到,说明二层出现问题(Vlan 间不通)或 ...

  9. gin 源码阅读(2) - http请求是如何流入gin的?

    推荐阅读: gin 源码阅读(1) - gin 与 net/http 的关系 本篇文章是 gin 源码分析系列的第二篇,这篇文章我们主要弄清一个问题:一个请求通过 net/http 的 socket ...

  10. self this

    面向对象编程(OOP,Object OrientedProgramming)现已经成为编程人员的一项基本技能.利用OOP的思想进行PHP的高级编程,对于提高PHP编程能力和规划web开发构架都是很有意 ...