fastapi在jinja2引用css的时候变成http://127.0.0.1:80/static/style.css
时间: 2023-10-04 18:12:04 浏览: 45
这是因为在 FastAPI 中静态文件默认是在 `/static` 目录下,而 Jinja2 模板引擎中的 CSS 文件路径是相对于当前页面的 URL 而言的。因此,如果你在模板中写的是 `href="style.css"`,它会自动在当前页面的 URL 前面加上 `http://127.0.0.1:80/`,导致找不到文件。
为了解决这个问题,你可以在模板中使用 `url_for` 函数来生成正确的 CSS URL。例如,在你的模板中这样写:
```html
<link rel="stylesheet" href="{{ url_for('static', path='style.css') }}">
```
这样,Jinja2 就会自动根据 `static` 目录的位置来生成正确的 CSS URL,而不会再加上 `http://127.0.0.1:80` 的前缀了。
相关问题
jinja2中<link rel="stylesheet" href="http://127.0.0.1:80/static/style.css">出现127.0.0.1
在Jinja2模板中,127.0.0.1是本地主机地址,它通常用于开发环境中。如果你想在生产环境中使用该模板,则应该将127.0.0.1替换为你的服务器域名或IP地址。
例如,如果你的服务器地址是example.com,则应该将链接标记更改为:
```
<link rel="stylesheet" href="http://example.com/static/style.css">
```
或者,如果你的服务器IP地址是192.168.1.100,则应该将链接标记更改为:
```
<link rel="stylesheet" href="http://192.168.1.100/static/style.css">
```
这样可以确保在生产环境中正确加载CSS文件。
fastapi在jinja2使用css
可以使用FastAPI和Jinja2一起创建具有CSS的网站。以下是一些步骤:
1. 首先,确保您已将所需的CSS文件放在正确的位置。例如,您可以将CSS文件放在“static/css”目录中。
2. 在FastAPI应用程序中,使用以下代码来设置Jinja2模板:
```python
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory="templates")
```
3. 创建一个Jinja2模板,并在其中引用CSS文件。例如,您可以创建一个名为“index.html”的文件,并在其中引用CSS文件:
```html
<!DOCTYPE html>
<html>
<head>
<title>FastAPI + Jinja2</title>
<link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
</head>
<body>
<h1>FastAPI + Jinja2</h1>
<p>Hello, {{ name }}!</p>
</body>
</html>
```
4. 在FastAPI应用程序中,创建一个路由方法来呈现Jinja2模板。例如:
```python
@app.get("/", response_class=HTMLResponse)
async def read_item(request: Request):
return templates.TemplateResponse("index.html", {"request": request, "name": "John Doe"})
```
在此示例中,我们使用了“TemplateResponse”类来呈现Jinja2模板。我们还将“request”和“name”作为参数传递给模板。
5. 最后,在FastAPI应用程序中,使用以下代码来指定包含CSS文件的目录:
```python
app.mount("/static", StaticFiles(directory="static"), name="static")
```
在此示例中,我们使用“StaticFiles”类来指定包含CSS文件的目录。我们还将此目录挂载到FastAPI应用程序的“/static”路径上。
这样,您就可以在FastAPI应用程序中使用Jinja2模板和CSS文件来创建具有样式的网站了。