MVC4 StyleBundle を使用すると画像が壊れるのはなぜですか?

MVC4 StyleBundle による画像の問題の解決

MVC の StyleBundle を使用して、サブフォルダー内の CSS ファイルと外部画像参照を結合するときに問題が発生します。物理コンテンツ パスに対応しない仮想パスを使用してバンドルを定義すると、CSS ファイル内の相対画像パスが壊れます。

解決策

正しいアプローチ結合するソース ファイルと同じパスにバンドルを定義することです。例:

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

ソース CSS ファイルと同じパスにバンドルを定義することで、画像の相対パスは有効なままになります。これは、バンドル パスの最後の部分がバンドルされた CSS ファイルのファイル名として効果的に機能するためです。

代替ソリューション

Hao Kung が提案した代替アプローチCssRewriteUrlTransformation を使用して、バンドルされた CSS 内の画像参照を書き換えます。 file:

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

この変換により、バンドル後に画像の相対パスが正しい場所を指すように自動的に変更されます。

注

CssRewriteUrlTransformation を使用する場合は、仮想ディレクトリ内の絶対パスの書き換えに関する潜在的な問題に注意することが重要です。この動作は、すべてのシナリオに適しているわけではありません。

以上がMVC4 StyleBundle を使用すると画像が壊れるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。