MVC中用 BundleCollection 压缩CSS时图片路径问题

MVC中有个专门提供JS和CSS压缩的类,BundleCollection,其实这个类也可以在asp.net中用,

关于BundleCollection类的详细推荐个地址:http://www.cnblogs.com/lifeil/archive/2013/03/11/2954071.html

我这里只是记录下使用过程中遇到的两个小问题

1.css被压缩后,里面图片路径文件的问题

我们可以看到MVC中 BundleConfig这个类里,都是自动生成的好多需要压缩的JS和CSS

bundles.Add(new StyleBundle("~/Content/Css").Include("~/Content/layout.css", "~/Content/wysiwyg.css"));

view在头部这样写就可以导入  ~/Content/layout.css 和~/Content/wysiwyg.css的CSS了

@Styles.Render("~/Content/Css")

照上面方法,我继续在后面加了个CSS,就是站点的皮肤,注意蓝色位置,已经不在Content文件下级了

bundles.Add(new StyleBundle("~/Content/Css").Include("~/Content/layout.css","~/Content/wysiwyg.css", "~/Content/themes/blue/styles.css"));

这样在开发的时候没什么问题,因为在开发模式下CSS和JS是没有被压缩的,但是我把网站发布后就出问题了,

Content/themes/blue/styles.css 里图片都是这样写的 background: url(img/bg_navigation.png),有人会说,为什么不写 /Content/themes/blue/img/bg_navigation.png,如果在MVC用到了区域,这样写路径也会就会出问题

如何在不发布网站的情况下测试压缩CSS呢?在BundleConfig 类里加上

BundleTable.EnableOptimizations = true;

或修改Web.config

<compilation debug="false" targetFramework="4.0">

看看压缩前后的CSS路径终于发现问题了

压缩前:

压缩后:

原来,我们写的 new StyleBundle("~/Content/Css") 会影响到压缩后的路径

解决办法:

对于皮肤的CSS,我们重写一个声明

bundles.Add(new StyleBundle("~/Content/themes/blue/Css").Include("~/Content/themes/blue/styles.css"));

这样图片就能找到了

2.压缩javascript文件的是时候,如果文件名带有 .min居然不压缩,连文件都不导入,例如

bundles.Add(new ScriptBundle("~/bundles/easyui").Include("~/Scripts/my/jquery.easyui.min.js"));

这样的文件在压缩后不会被导入,解决办法

改JS名字,去掉min 或 在view里写 @Scripts.Render("~/Scripts/my/jquery.easyui.min.js"),这样就不会被压缩了

其实带min已经是被压缩了的,如果对这个文件进行压缩,运行里面相关方法会报错

写的有点乱,只是记录下

时间: 2024-11-08 17:30:14

MVC中用 BundleCollection 压缩CSS时图片路径问题的相关文章

透过现象看webpack处理css文件中图片路径转换的具体过程

webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也包括css文件中图片资源的处理,那么webpack到底是怎么处理它的呢?笔者之前也遇到过类似图片路劲的问题,为此还写过一篇博文webpack生成的css文件background-image url图片无法加载.今天就来说说webpack是怎么处理css文件中的图片路径的,首先上一个具体的例子. 一个

Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文件的路径时,直接得到404错误,而路径肯定没有错,其原因就在于在web.xml 中配置了类似如下的 spring servlet: 程序代码 <servlet>    <servlet-name&g

Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题

问题描述 在用springmvc开发应用程序的时候.对于像我一样的初学者,而且还是自学的人,有一个很头疼的问题.那就是数据都已经查出来了,但是页面的样式仍然十分简陋,加载不了css.js,图片等资源文件,如果你输入某个css的文件在浏览器中得到的直接是404错误(例如http://localhost:8080/iMax_view/css/classify.css),表示路径肯定没有错,这是因为你在web.xml中配置的springservlet ]<!-- springmvc前端控制器,rest

Spring MVC程序中得到静态资源文件css,js,图片

转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文件的路径时,直接得到404错误,而路径肯定没有错,其原因就在于在web.xml 中配置了类似如下的 spring servlet: 程序代码 <servlet>    

mvc伪静态&lt;四&gt; 伪静态后静态页面或者引用的css和图片失效

引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" rel="stylesheet" type="text/css" /> 改成:<link href="http://www1.lvyou.edushi.com/Content/css/style.css" rel="style

Node.js压缩web项目中的js,css和图片

安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功 安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是npm install xxx ,我之前安装都是不适于全局安装的,这个应该无所谓 编写压缩的js(应该很好看懂) /*******压缩JS******/ var fs = require('fs'); var uglify = require("../../nodejs/node_modules/u

DIV CSS鼠标经过悬停在图片上时图片上方显示文字(转)

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明.可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容. 纯div+css实现第一张图片没有文字内容,鼠标悬停时出现第二张图那样效果 使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们设置一个盒子对象,并且将图片使用style标签内设置为CSS背景图片,同时设置该对象ht

Android中处理大图片时图片压缩

1.BitmapFactory.Options中的属性 在进行图片压缩时,是通过设置BitmapFactory.Options的一些值来改变图片的属性的,以下我们来看看BitmapFactory.Options中经常使用的属性意思: options.inPreferredConfig - 设置Bitmap的偏好配置.值有Bitmap.Config.ARGB_8888,Bitmap.Config.ARGB_4444,Bitmap.Config.ARGB_8888.Bitmap.Config.RGB

Css调整图片大小[将大图片压缩成小图片]

<div style="width:设置宽px; height:设置高px; background-image: url('图片路径'); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片路径',sizingMethod='scale'); float:left;background-size:设置宽px 设置高px;"> </div> 采用滤镜[filter]效果,实现大图片压缩