☰

MVC4 StyleBundleが画像を解決しない 質問する

tag-icon • tag-icon css jquery-ui asp.net-mvc-4 bundle asp.net-optimization
MVC4 StyleBundleが画像を解決しない 質問する

私の質問は次のようなものです:

ASP.NET MVC 4 の縮小と背景画像

ただし、可能であれば、MVC 独自のバンドルを使い続けたいと思っています。jQuery UI などのスタンドアロンの CSS と画像セットが機能するように、スタイル バンドルを指定するための正しいパターンが何であるかを理解しようとして頭が混乱しています。

典型的な MVC サイト構造があり、 に/Content/css/は などの基本 CSS が含まれていますstyles.css。その css フォルダー内には、 などのサブフォルダーもあり、/jquery-uiその CSS ファイルと/imagesフォルダーが含まれています。jQuery UI CSS の画像パスはそのフォルダーに相対的であるため、変更したくありません。

私の理解では、 を指定する場合、StyleBundle実際のコンテンツ パスと一致しない仮想パスを指定する必要があります。これは、(コンテンツへのルートを無視していると仮定すると) IIS がそのパスを物理ファイルとして解決しようとするためです。したがって、次のように指定します。

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

レンダリングには以下を使用します:

@Styles.Render("~/Content/styles/jquery-ui")

リクエストが送信される先は次のとおりです:

http://localhost/MySite/Content/styles/jquery-ui?v=nL_6HPFtzoqrts9nwrtjq0VQFYnhMjY5EopXsK8cxmg1

これは、正しい、縮小された CSS レスポンスを返します。しかし、ブラウザは次のように相対的にリンクされた画像のリクエストを送信します。

http://localhost/MySite/Content/styles/images/ui-bg_highlight-soft_100_eeeeee_1x100.png

これは404。

URL の最後の部分はjquery-ui拡張子のない URL であり、バンドルのハンドラーであることは理解しているので、画像の相対リクエストが単に である理由はわかります/styles/images/。

そこで私の質問は、この状況に対処する正しい方法は何ですか?

ベストアンサー1

このスレッドによるとMVC4 CSS バンドルと画像参照バンドルを次のように定義すると、

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

バンドルを構成するソース ファイルと同じパスにバンドルを定義する場合、相対イメージ パスは引き続き機能します。バンドル パスの最後の部分は、実際にはfile nameその特定のバンドル用です (つまり、/bundle任意の名前にすることができます)。

これは、同じフォルダーの CSS をバンドルしている場合にのみ機能します (バンドルの観点からは理にかなっていると思います)。

アップデート

@Hao Kung の以下のコメントによると、代わりにこれをCssRewriteUrlTransformation(バンドル時にCSSファイルへの相対URL参照を変更する）。

注: 仮想ディレクトリ内の絶対パスへの書き換えに関する問題に関するコメントは確認していないため、これはすべてのユーザーにとって機能しない可能性があります (?)。

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

おすすめ記事