CssRewriteUrlTransformを使用すると、MVCのバンドルがCSSイメージで間違ったURLを返します。
URLがたとえばhttp://usid01-srv002/MyApplication
のイントラネットアプリケーションがあります。 IISの「既定のWebサイト」にあります。
BundleConfig.cs
には次のものがあります:
bundles.Add(new StyleBundle("~/bundles/jcss")
.Include("~/Scripts/JQueryUI/css/*.css", new CssRewriteUrlTransform())
);
バンドルシステムは、これらのCSSファイルで参照されている画像に対して間違ったURLを生成し、JQueryUIの非常によくテストされたCSSファイル(FireBugから)を生成します。
例えば生成しています
http://usid01/path/foo.png
生成する必要がある場合:
http://usid01/MyApplication/path/foo.png
適切な場所を指すURLを生成するバンドリングシステムを取得するにはどうすればよいですか?
CssRewriteUrlTransformは、絶対パスでCSS Urlを更新します。
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",new CssRewriteUrlTransform()));
「site.css」に次のCSSクラスがあります
.Sandy
{
background-image: url("Images/Sandy.jpg");
border: 1px solid #c8c8c8;
border-radius:4px 4px 4px 4px;
box-shadow: 1px 1px 8px gray;
background-position:left;
background-size:contain;
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-repeat:no-repeat;
min-height:100px;
min-width:100px;
display:block;
}
以下のフォルダ構造-
-Web site Root
-Content
--site.css
--Images
---Sandy.jpg
バンドルにより、「background-image」の次のCSS Url Pathが生成されます-
background-image: url("/Content/Images/Sandy.jpg");
そして今、あなたがウェブサイト/ウェブアプリケーションをパス上のウェブサーバー上のウェブサイトとしてホストしている場合、ブラウザは先頭の「/」のために次のURLを使用してこのリソースのリクエストを送信するため、動作します
http://<server>/content/images/sandy.jpg
ただし、WebアプリケーションとしてWebサイトをホストする場合、問題が発生します。ブラウザはこれを相対ではなく絶対URLとして解釈し、このリソースを取得するために次のリクエストを送信するためです-
http://<server>/content/images/sandy.jpg
したがって、この問題の解決策は、CSSファイルでも相対URLを使用し、次にBundle configからCssRewriteUrlTransformを以下のように削除することです-
background-image: url("Images/Sandy.jpg");
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
壊れた画像の理由は、バンドル中に定義された新しいパスに関連する画像を見つけようとするためですつまり.
bundles.Add(new StyleBundle( "〜/ Content/woothemes")。Include( "〜/ Content/woothemes/css/style.css"、 ));
したがって、style.cssで定義された画像パス(つまり背景画像)がある場合、Content/woothemes/css /の代わりにContent/woothemesからの相対パスを取得しようとします。 、したがって、画像は見つかりません
同じフォルダーのファイルの問題を克服するための1つの回避策は、フォルダー(ファイルが縮小される)と同じ新しいパスを定義することです。
bundles.Add(new StyleBundle( "〜/ Content/woothemes/css")。Include( "〜/ Content/woothemes/css/style.css"、 ) );
これにより、バンドルされたファイルと実際のファイルパスが一致し、CSSで定義されたイメージが検出されるため、問題は解決されます。
問題は、上記と同じ理由で異なるフォルダのファイルを混在させる場合にのみ解決されません
これは私のために働く、
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/content/styles/css")" rel="stylesheet" type="text/css" />