MVC4使用Bundling,CSS中图片路径问题

昨天在使用MVC4中Bundling打包和压缩Css文件时,发现Css中引用的图片显示不了,于是在网上各种搜索,但是没有找到答案...

今天在仔细研究MVC4的Demo实例后,解决了这个问题,在此记录一下,如果能帮助到其他人, 那就更好了。

废话结束,进入正题,静态文件结构如下:

base.css文件中图片使用的是相对路径:

background: url(Images/bg.png)

一开始构造StyleBundle时参数virtualPath的值为"~/Content/css",这样图片bg.png无法显示。

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/Order/base.css"));

把virtualPath的值改为"~/Content/Order/css"以后图片bg.png就可以正常显示了。

bundles.Add(new StyleBundle("~/Content/Order/css").Include("~/Content/Order/base.css"));

原因是在加载页面时,请求CSS的实际路径为构造Bundle(virtualPath)时virtualPath的值而并非.css文件的路径,所以.css文件中的图片的路径要设置为相对于virtualPath的路径而不是相对于.css文件的路径。

另外,如果需要在MVC3中使用Bundling可以参见 http://www.codeproject.com/Articles/419054/Practical-ASP-NET-MVC-3-tips#tip-06