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

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/。

Answer 3

安装

StaticFiles

实例

要将

StaticFiles

实例挂载到特定路径，您可以使用以下命令：

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

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

在 Jinja2 模板中提供

StaticFiles

的链接

可以使用以下代码链接到 Jinja2 模板中的

static

文件，如 Starlette 文档中所述：

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

或者，您可以直接使用安装

StaticFiles

实例时给出的路径名。在这种情况下，即

/static

。因此，任何以

/static

开头的路径都将由它处理:

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

更多详情请参考这个答案。