suchen

Heim  >  Fragen und Antworten  >  Hauptteil

FastAPI: Wie rendere ich CSS/JS/Bilder gleichzeitig in einer HTML-Datei?

Ich habe Probleme beim Rendern von HTML-Dateien in FastAPI.

main.py-Datei

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

@app.get("/")
async def index():
    return FileResponse('index.html', media_type='text/html')

Wenn ich die obige Datei mit uvicorn ausführe, kann ich die HTML-Datei unter http://127.0.0.1:8765/ rendern, aber die statischen Dateien wie CSS, JS und Bilder werden nicht gerendert.

index.html: etwas Code für eine HTML-Datei (erstellt mit Angular JS) 

<link rel="stylesheet" href="styles.87afad25367d1df4.css" media="print" onload="this.media='all'"><noscript>
<link rel="stylesheet" href="styles.87afad25367d1df4.css"></noscript></head>
<body class="cui">
  test
  <app-root></app-root>
<script src="runtime.7f95ee6540776f88.js" type="module"></script>
<script src="polyfills.a246e584d5c017d7.js" type="module"></script>
<script src="main.4f51d0f81827a3db.js" type="module"></script>

</body></html>

Dateistruktur:

modulename
  - static
       - index.html
       - styles.87afad25367d1df4.css
       - runtime.7f95ee6540776f88.js
       - polyfills.a246e584d5c017d7.js
       - main.4f51d0f81827a3db.js
       
  - main.py 
  - __init__.py

Wenn ich die Browserkonsole öffne, sieht es so aus:

CSS/js sollte ohne enthaltene Statik gerendert werden, z. B. http://127.0.0.1:8765/styles.87afad25367d1df4.css, aber es wird von http://127.0.0.1:8765/static/styles.87afad25367d1df4 .css gerendert in den Browser laden und ausführen.

Ich bin mir nicht sicher, wie ich das beheben kann. Ich wäre für jede Hilfe sehr dankbar.

Update: Zur besseren Erklärung wurde der folgende Code hinzugefügt

main.py

import uvicorn
import os
import webbrowser
from fastapi import FastAPI
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import HTMLResponse

app = FastAPI(
    title="UI",
    description="This is to test",
)

app.add_middleware(
    CORSMiddleware,
    allow_origins=['*'],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

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

def start_server():
    # print('Starting Server...')       

    uvicorn.run(
        "ui.main:app",
        host="0.0.0.0",
        port=8765,
        log_level="debug",
        reload=True,
    )
    # webbrowser.open("http://127.0.0.1:8765/")

if __name__ == "__main__":
    start_server()

Führen Sie diese Datei als Paket/Modul in der test.py-Datei aus: 

from ui import main

if __name__ == "__main__":
    main.start_server()

index.html:

<!DOCTYPE html><html lang="en">
  <head>
  <meta charset="utf-8">
  <title>WingmanUi</title>
  <base href="static/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.87afad25367d1df4.css" media="print" onload="this.media='all'">
</head>
<body>
  This is to test  
<script src="runtime.7f95ee6540776f88.js" type="module"></script>
<script src="polyfills.a246e584d5c017d7.js" type="module"></script>
<script src="main.4f51d0f81827a3db.js" type="module"></script>

</body>
</html>

Dateistruktur:

ui
  - static
       - index.html
       - styles.87afad25367d1df4.css
       - runtime.7f95ee6540776f88.js
       - polyfills.a246e584d5c017d7.js
       - main.4f51d0f81827a3db.js
       
  - main.py 
  - __init__.py


P粉237125700P粉237125700357 Tage vor605

Antworte allen(1)Ich werde antworten

  • P粉029057928

    P粉0290579282023-12-12 16:29:07

    首先，当使用 StaticFiles 时html 标志设置为 True，以便提供静态文件（对于动态网页，请参阅 模板 代替），例如：

    from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

app.mount('/static', StaticFiles(directory='static', html=True), name='static')

    您不必定义端点来服务索引页，因为 html=True 意味着在 HTML 模式下运行您的应用程序；因此，FastAPI/Starlette 会自动加载 index.html — 请参阅 Starlette 文档 静态文件。另外，如果您需要其他端点，请注意应用程序中定义端点的顺序很重要。。 p>

    其次，由于您已安装 StaticFiles 实例并指定 directory='static'，因此您的静态文件预计将从该目录提供。因此，您所要做的就是将所有静态文件以及 HTML 文件移动到 static 目录中。然后，您应该能够按如下方式提供静态文件（假定您已将 StaticFiles 实例安装到 /，例如 app.mount('/', ...):

    <script src="someScript.js"></script>

    或者，如果 StaticFiles 实例安装到 /static，例如 app.mount('/static', ...) （另请参阅此答案）：

    <script src="static/someScript.js"></script>

    就您而言，由于您已将 StaticFiles 实例安装到 /，因此静态文件仍以 static 前缀加载的原因，例如 http://127.0.0.1:8000/static/someScript.js 只是因为您添加了 HTML 文档中用于所有相对 URL 的 URL 。因此，您应该从 HTML 文件中删除以下行：

    <base href="static/">

    Antwort
    0
  • StornierenAntwort