1. ホーム
  2. css

[解決済み】MVC4 StyleBundleで画像が解決されない件

2022-03-30 09:03:52

質問

私の質問はこれに似ています。

ASP.NET MVC 4 Minification & Background Images

ただし、できることなら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

これは、正しい、minified CSSのレスポンスを返しています。 しかし、その後、ブラウザは比較的リンクされた画像に対して、次のようにリクエストを送ります。

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

どれが 404 .

私のURLの最後の部分は、理解しています jquery-ui は拡張子のない URL で、私のバンドルのハンドラです。したがって、画像に対する相対リクエストは単に /styles/images/ .

そこで質問なのですが 正しい方法は何ですか? このような場合、どのように対処すればよいのでしょうか?

どのように解決するのですか?

のこのスレッドによると 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()));