NET教程:MVC4使用Bundling,CSS中图片路径问题
2013-05-02 09:48
459 查看
昨天在使用MVC4中Bundling打包和压缩Css文件时,发现Css中引用的图片显示不了,于是在网上各种搜索,但是没有找到答案...
今天在仔细研究MVC4的Demo实例后,解决了这个问题,在此记录一下,如果能帮助到其他人, 那就更好了。
废话结束,进入正题,静态文件结构如下:
base.css文件中图片使用的是相对路径:
一开始构造StyleBundle时参数virtualPath的值为"~/Content/css",这样图片bg.png无法显示。
把virtualPath的值改为"~/Content/Order/css"以后图片bg.png就可以正常显示了。
原因是在加载页面时,请求CSS的实际路径为构造Bundle(virtualPath)时virtualPath的值而并非.css文件的路径,所以.css文件中的图片的路径要设置为相对于virtualPath的路径而不是相对于.css文件的路径。
另外,如果需要在MVC3中使用Bundling可以参见 http://www.codeproject.com/Articles/419054/Practical-ASP-NET-MVC-3-tips#tip-06
今天在仔细研究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
相关文章推荐
- MVC4使用Bundling,CSS中图片路径问题
- asp.net用户控件中使用相对路径的解决方法--------图片路径问题(用户控件、图片路径),ResolveUrl
- <web前端>当背景图片为渐变色图片时,为避免浏览器大小问题,可以选择使用<CSS>实现渐变色,教程如下
- asp.net 用户控件中 使用相对路径的解决方法-------- 图片路径问题(用户控件、图片路径) ,ResolveUrl
- struts2使用action跳转后的页面路径如果是相对路径的话会出现css、js以及图片等无法加载问题
- 用CSS样式下载器 下载CSS里面的图片路径配对问题
- 使用CSS解决文字环绕图片问题的代码
- 母板页中的引用的图片,JS,css等路径问题
- CSS和JS引用图片(资源)的路径问题
- 在ASP.NET WEBFORM项目中使用MVC4中的BundleConfig捆绑压缩JS和CSS
- 使用CFileDialog后相对路径的图片加载失败的问题
- CSS定义背景图片background-image须注意路径问题
- ASP.net 中在子页中使用 CSS 的问题?
- Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结
- [爬虫项目]scrapy使用ImagePipeline下载图片And图片分类存储(解决路径问题)
- wordpress解决主题中路径的问题(图片,css)
- zend framework 图片以及css路径问题
- css里面图片路径问题(同包/不同包)探讨
- 小记——CSS 和 JS 中关于图片路径的问题
- mvc 解决StyleBundle中 图片绝对路径 装换成相对路径的问题 CssRewriteUrlTransform