[解決済み】MVC4 StyleBundleで画像が解決されない件
質問
私の質問はこれに似ています。
ただし、できることなら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()));
関連
-
[解決済み】@font-faceが機能しない。
-
[解決済み】DIVの幅が100%というのは本当の100%ではない
-
[解決済み] 2つのdivを隣り合わせに配置するには?
-
[解決済み] ユーザーエージェントのスタイルシートが私のCSSを上書きしないようにする方法
-
[解決済み] JavaFX Labelの文字色を変更する方法
-
[解決済み] CSSで0を指定する場合、明示的に単位を表記するべきか、省略するべきか。
-
[解決済み] 入力・テキストフィールドの背景色
-
[解決済み] CSSでbackground-imageのpathを指定するには?
-
[解決済み] MIME-typeが原因でスタイルシートが読み込まれない
-
[解決済み] MVC4におけるスタイル.レンダリング
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ダウンロードしたフォントのデコードに失敗しました。
-
[解決済み】Text-decoration: noneが機能しない。
-
[解決済み】bootstrap 3で画像にテキストを回り込ませる
-
[解決済み] "セレクタ(CSS)にIDを使うな "なら、IDの代わりに何を使えばいい?
-
[解決済み] グレーの透明な背景を設定する
-
[解決済み] Bootstrapコンテナが複数またはネストされていませんか?
-
[解決済み] bootstrapのチェックボックスの色を変更するには?
-
[解決済み] エレメントの角を面取りする方法を教えてください。
-
[解決済み] codepenでfont awesomeを使用する
-
[解決済み】文字列の中にある文字列(実際はchar)の出現回数を数えるには?