MVC捆绑和CSS相对URL

使用CssRewriteUrlTransform时,MVC的绑定在CSS图像中返回错误的URL:

我有一个Intranet应用程序,其URL是,例如: http://usid01-srv002/MyApplication 。 它在IIS的“默认网站”中。

BundleConfig.cs有以下内容:

 bundles.Add(new StyleBundle("~/bundles/jcss") .Include("~/Scripts/JQueryUI/css/*.css", new CssRewriteUrlTransform()) ); 

绑定系统为这些CSS文件中引用的任何图像生成了错误的URL,甚至产生了404甚至JQueryUI经过很好testing的CSS文件(来自FireBug):

由于生成的URL错误而导致的404错误

例如它正在产生

 http://usid01/path/foo.png 

何时应该产生:

 http://usid01/MyApplication/path/foo.png 

如何让捆绑系统生成指向正确位置的URL?

CssRewriteUrlTransform以绝对path更新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 

捆绑将生成以下CSS Urlpath的“背景图像” –

  background-image: url("/Content/Images/Sandy.jpg"); 

而现在,如果您将网站/networking应用程序作为网站服务器上的path上的网站将工作,因为浏览器将使用以下url发送请求该资源,因为前导'/'

 http://<server>/contenthttp://img.dovov.comsandy.jpg 

但是如果您将网站作为networking应用程序托pipe,则会造成问题。 因为浏览器仍然将此解释为绝对Url而不是相对的,并仍然发送以下请求来获取此资源 –

  http://<server>/contenthttp://img.dovov.comsandy.jpg 

所以,这个问题的解决scheme是甚至在CSS文件中使用相对Url,然后从Bundleconfiguration中删除CssRewriteUrlTransform,如下所示 –

 background-image: url("Images/Sandy.jpg"); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); 

这对我有用,

 <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/content/styles/css")" rel="stylesheet" type="text/css" /> 

破坏图像的原因是它试图find相对于在捆绑期间定义新path的图像,即,

 bundles.Add(新的StyleBundle(“〜/ Content / woothemes”)。Include(
             “〜/内容/ woothemes / CSS / style.css文件”,
 ));

因此,如果在style.css中定义了任何图像path(即背景图像),它将尝试获取其相对于Content / woothemes而不是Content / woothemes / css /的path,因此将不会find图像

解决相同文件夹文件问题的一种解决方法是定义与文件夹(其文件被缩小)相同的新path,即

 bundles.Add(新的StyleBundle(“〜/ Content / woothemes / css”)。Include(
             “〜/内容/ woothemes / CSS / style.css文件”,
 ));

这样捆绑的文件和实际的文件path将匹配和在CSS中定义的图像将被发现,因此问题将得到解决

如果您出于上述相同的原因混合来自不同文件夹的文件,则问题将不会得到解决