FastAPI で HTMl ファイルをレンダリングするときに問題が発生しました。
main.py ファイル
リーリーuvicorn を使用して上記のファイルを実行すると、http://127.0.0.1:8765/ で HTML ファイルをレンダリングできますが、静的ファイル (css、js、画像など) はレンダリングされません。
index.html: HTML ファイルのコード (Angular JS で構築)
リーリーファイル構造:
リーリーブラウザコンソールを開くと、次のように表示されます。
CSS/js は静的を含まずにレンダリングする必要があります (例: http://127.0.0.1:8765/styles.87afad25367d1df4.css) が、http://127.0.0.1:8765/static/styles .87afad25367d1df4 からレンダリングされます。 cssがブラウザに読み込まれて実行されます。
これを修正する方法がわかりません。助けていただければ幸いです。
更新: よりわかりやすく説明するために次のコードを追加しました
main.py
リーリーこのファイルを test.py ファイル内のパッケージ/モジュールとして実行します:
リーリーindex.html：
リーリーファイル構造:
リーリー
P粉0290579282023-12-12 16:29:07
まず、StaticFiles を使用する場合、html フラグが True に設定され、静的ファイルが提供されるようになります (動的 Web ページの場合)代わりに template を参照してください)、例:
html=True はアプリケーションを HTML モードで実行することを意味するため、インデックス ページを提供するエンドポイントを定義する必要はありません。したがって、FastAPI/Starlette は自動的に index.html## をロードします。 # — Starlette のドキュメント静的ファイルを参照してください。また、追加のエンドポイントが必要な場合は、 アプリケーション内でエンドポイントを定義する順序が重要であることに注意してください。 。 p>
2 番目に、StaticFiles
インスタンスをインストールし、directory='static' を指定したため、静的ファイルはそのディレクトリから提供されることが期待されます。したがって、すべての静的ファイルと HTML ファイルを static ディレクトリに移動するだけです。これで、次のように静的ファイルを提供できるようになります (StaticFiles インスタンスを / にマウントしたと仮定します。例: app.mount('/', ...#) ##):
リーリー
あるいは、StaticFiles
app.mount('/static', ...) のように /static にマウントされている場合 (「 この回答):
リーリー
あなたの場合、静的ファイルが依然として static
StaticFiles インスタンスを / にインストールしているためです。 # #http://127.0.0.1:8000/static/someScript.js すべての relative# の HTML ドキュメントに を追加しただけです。 ## URL URL。したがって、HTML ファイルから を削除する必要があります:
リーリー