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：
リーリーファイル構造:
リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
まず、
リーリーStaticFilesを使用する場合、htmlフラグがTrueに設定され、静的ファイルが提供されるようになります (動的 Web ページの場合)代わりに template を参照してください)、例:html=Trueはアプリケーションを HTML モードで実行することを意味するため、インデックス ページを提供するエンドポイントを定義する必要はありません。したがって、FastAPI/Starlette は自動的にindex.html## をロードします。 # —Starlette のドキュメント静的ファイルを参照してください。また、追加のエンドポイントが必要な場合は、 アプリケーション内でエンドポイントを定義する順序が重要であることに注意してください。 。 p> 2 番目に、StaticFilesインスタンスをインストールし、
インスタンスがdirectory='static'を指定したため、静的ファイルはそのディレクトリから提供されることが期待されます。したがって、すべての静的ファイルと HTML ファイルをstaticディレクトリに移動するだけです。これで、次のように静的ファイルを提供できるようになります (StaticFilesインスタンスを/にマウントしたと仮定します。例:app.mount('/', ...#) ##):リーリーあるいは、StaticFilesapp.mount('/static', ...)
プレフィックス付きで読み込まれている理由は、# のようにのように/staticにマウントされている場合 (「この回答):リーリー あなたの場合、静的ファイルが依然として staticStaticFiles
インスタンスを/にインストールしているためです。 # #http://127.0.0.1:8000/static/someScript.jsすべてのrelative# の HTML ドキュメントにを追加しただけです。 ## URL URL。したがって、HTML ファイルからを削除する必要があります: リーリー