CSS ファイルを MVC4 スタイル バンドルにバンドルする際の画像パスの問題を解決するにはどうすればよいですか?

MVC4 StyleBundle 画像解像度の複雑さ

MVC4 のバンドル機能は、Web アプリケーションを最適化するための便利なソリューションを提供します。ただし、CSS バンドル内の画像の処理には、バンドル時に CSS ファイル内の相対画像パスが壊れる可能性があるため、特有の課題が生じます。

同様の質問で述べたように、バンドル中に元の相対画像パスを保持するには、次のように指定することで実現できます。既存の物理コンテンツ パスと競合しない、StyleBundle の仮想パス。この場合、バンドル パスは「/Content/styles/jquery-ui」として指定されており、CSS ファイルや画像が含まれる実際のパス「/Content/css/jquery-ui」とは異なります。

ただし、このアプローチではブラウザ内の画像パスが壊れてしまいます。ブラウザーは、バンドルされた CSS ファイルに関連する画像を要求し、404 エラーが発生します。

推奨される解決策は、バンドル内のソース CSS ファイルと同じパスにバンドルを定義することです。これにより、CSS ファイル内の相対画像パスが有効なままになります。たとえば、次のバンドル定義はイメージ パスの問題を解決します。

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                   .Include("~/Content/css/jquery-ui/*.css"));

あるいは、新しいバージョンの ASP.NET では、バンドルされた CSS ファイル内の相対イメージ パスを、バンドル内の絶対パスに変更する CssRewriteUrlTransformation の適用をサポートする場合があります。仮想ディレクトリ。これは、次のコードを使用して実現できます。

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                   .Include("~/Content/css/jquery-ui/*.css",
                    new CssRewriteUrlTransform()));

このアプローチでは、画像の相対パスを絶対パスに書き換えて、画像が正しく解決されるようにします。書き換えによって絶対パスが仮想ディレクトリ内のパスに変換される場合、問題が発生する可能性があるため、このアプローチを慎重にテストすることをお勧めします。

以上がCSS ファイルを MVC4 スタイル バンドルにバンドルする際の画像パスの問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。