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）：

例如它正在产生

 http://usid01/path/foo.png 

何时应该产生：

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

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

Answer 1

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")); 

Answer 2

这对我有用，

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

Answer 3

破坏图像的原因是它试图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中定义的图像将被发现，因此问题将得到解决

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