FastAPI 未加载 static 个文件

Question

所以，我将我的项目从 node.js 换成 python FastAPI。 节点一切正常，但这里说我的 static 文件不存在，所以这里是代码：

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

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

Answer 1

这里：

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

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

Answer 2

要从 HTML (Jinja2) 模板中链接到 static 文件，您可以使用以下示例代码，如Starlette 文档中所述：

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

Answer 3

folder = os.path.dirname(__file__)
app.mount("/static", StaticFiles(directory=folder+"/../static",html=True), name="static")

作品。 以某种方式使用directory="../static"不起作用，指向 FastAPI 项目外部时需要完整路径。 然后还需要html=True才能正确提供 html 个文件。 请参阅https://www.starlette.io/staticfiles/ 。