Bootstrap アイコンがローカルに読み込まれているのに、オンラインでは表示されないのはなぜですか?

ブートストラップ アイコンがローカルにロードされるがオンラインではない

アイコンを含む単純なブートストラップ ボタンをローカルにロードすると、アイコンが正しく表示されます。ただし、アプリケーションを Windows Azure に展開すると、アイコンが奇妙なプレフィックスに置き換えられます。この問題は、アプリケーションがローカルとオンラインの異なる場所からアイコン ファイルをロードしようとするために発生します。

ローカルでは、ブラウザーはオンライン中に /Content/fonts/glyphicons-halflings-normal.woff からアイコン ファイルをロードします。 /fonts/glyphicons-halflings-regulator.woff からロードしようとします。主な違いは、Azure URL に /Content プレフィックスがないことです。

この問題を解決するには、バンドルされている CSS ファイルがアイコン ファイルの場所を正しく参照していることを確認してください。この例では、CSS ファイルはパス ../fonts/glyphicons-halflings-normal.woff を使用してアイコンを参照します。 CSS ファイルがバンドルされているため、アプリケーションはアプリケーション ルートの /fonts でアイコン ファイルを検索しますが、これは正しくありません。

これを修正するには、次のようにバンドルの名前を変更して /Content プレフィックスを含めます。

bundles.Add(new StyleBundle("~/Content/css/bootstrapcss").Include(
                "~/Content/bootstrap/bootstrap.css"));

これにより、バンドル名が目的のファイル パスと一致し、アプリケーションが Azure にデプロイされるときにアイコン ファイルが正しく読み込まれることが保証されます。

以上がBootstrap アイコンがローカルに読み込まれているのに、オンラインでは表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。