FastAPI 不加载静态文件

Question

所以，我正在将我的项目从 node.js 切换到 python FastAPI。一切都在节点上运行良好，但这里它说我的静态文件不存在，所以这里是代码：

from fastapi import FastAPI, Request, WebSocket
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

app.mount("/static", StaticFiles(directory="../static"), name="static")
templates = Jinja2Templates(directory='../templates')

@app.get('/')
async def index_loader(request: Request):
    return templates.TemplateResponse('index.html', {"request": request})

项目的结构如下所示：

文件显然在它们应该在的位置，但是当我连接到网站时出现以下错误：

←[32mINFO←[0m:     connection closed
←[32mINFO←[0m:     127.0.0.1:54295 - "←[1mGET /img/separator.png HTTP/1.1←[0m" ←[31m404 Not Found←[0m
←[32mINFO←[0m:     127.0.0.1:54296 - "←[1mGET /css/rajdhani.css HTTP/1.1←[0m" ←[31m404 Not Found←[0m
←[32mINFO←[0m:     127.0.0.1:54295 - "←[1mGET /js/pixi.min.js HTTP/1.1←[0m" ←[31m404 Not Found←[0m
←[32mINFO←[0m:     127.0.0.1:54296 - "←[1mGET /js/ease.js HTTP/1.1←[0m" ←[31m404 Not Found←[0m
←[32mINFO←[0m:     127.0.0.1:54298 - "←[1mGET / HTTP/1.1←[0m" ←[32m200 OK←[0m
←[32mINFO←[0m:     127.0.0.1:54298 - "←[1mGET /img/separator.png HTTP/1.1←[0m" ←[31m404 Not Found←[0m
←[32mINFO←[0m:     127.0.0.1:54299 - "←[1mGET /css/rajdhani.css HTTP/1.1←[0m" ←[31m404 Not Found←[0m
←[32mINFO←[0m:     127.0.0.1:54298 - "←[1mGET /js/pixi.min.js HTTP/1.1←[0m" ←[31m404 Not Found←[0m
←[32mINFO←[0m:     127.0.0.1:54299 - "←[1mGET /js/ease.js HTTP/1.1←[0m" ←[31m404 Not Found←[0m

所以，基本上，我正在使用的任何静态文件都丢失了，而且我不知道我做错了什么。如何解决？

Answer 1

这里：

app.mount("/static", StaticFiles(directory="../static"), name="static")

您将静态目录安装在 /static 路径下。这意味着，如果您想访问 html 中的静态文件，则需要使用 static 前缀，例如<img src="static/img/separator.png"/>

Answer 2

要从 HTML (Jinja2) 模板中 link 静态文件，您可以使用以下示例代码，如 Starlette documentation:

中所述

<link href="{{ url_for('static', path='/css/rajdhani.css') }}" rel="stylesheet">

或者，您可以使用挂载 StaticFiles() 实例时给出的名称（在本例中为“static”）。 Any path that starts with "/static" will be handled by it。示例如下：

<link href="static/css/rajdhani.css'" rel="stylesheet">

FastAPI 不加载静态文件

FastAPI not loading static files

javascript

python

fastapi

static-files

starlette