jsf开发心得(3)-jsf应用中css运用背景图片显示不了的问题

2019独角兽企业重金招聘Python工程师标准>>>

   在jsf中模板应用，如果引用css还是按照传统的link标签链接的话，如果网页存放的目录不同，还是会产生相对路径问题。

   而在jsf中有两种方式避免了目录不同产生的相对路径出错的情况。

   一、 表达式引用资源：  <link href="#{resource['css:common.css']}" rel="stylesheet" type="text/css" />  

   二、  <h:outputStylesheet library="css" name="common.css"></h:outputStylesheet>

   这两种方式都是将资源文件放在web应用下的resources目录的css子目录下。可以从生产的html源码看出他们都被转成了绝对路径的形式

    <link href="/egoshop-1.0.0/javax.faces.resource/common.css.xhtml?ln=css" rel="stylesheet" type="text/css" />

    不知是jsf故意为之，还是一个bug，在css文件中的背景设置图片引用时，按照css传统的引用法引用不了。

    比如：css文件路径“resources/css/common.css”。某一个图片的路“resources/img/one.gif",现在要在common.css的元素设置背景图片，如果按照标准的图片引用路径是“backgrond:'../img/one.gif'”

但是如果引用css文件是上面两种方法引用的，图片显示不了。

    挺郁闷的吧？jsf既然解决了引用资源相对路径的问题，但是又产生了另一种问题（相对我们平时用css的习惯，也是标准）。。。。

    不过解决的办法不是没有！

    这得需要了解浏览器下载文件的方式。服务器将html文档返回给浏览器，而html文档包含了很多需要再次下载的资源，如图片等。那么浏览器就根据资源的路径去下载。绝对路径是没有什么疑问的，但关键是相对路径。

    如果文档指定了base元数据，以base指定的src为准区套资源的绝对路径。如果没有指定base就根据当前文档的url去套资源的绝对路径。

    好吧，指定base的src属性吧！但是还是对css里的图片路径没产生影响。。。。

    问题没有解决！！！

    那么css文件里的图片路径是以什么为基准的呢？

    比较没有用jsf技术时css引用的形式：

    <link href="/egoshop-1.0.0/resources/css/common.css" rel="stylesheet" type="text/css" />

    而用了jsf技术后css引用的形式

    <link href="/egoshop-1.0.0/javax.faces.resource/common.css.xhtml?ln=css" rel="stylesheet" type="text/css" />

    可以发现，css文件寻找图片资源是以引用css文件 的路径为基准的。也就是“/”

    而现在css里的图片路径“../img/one.gif”，那么他根据<link href="/egoshop-1.0.0/javax.faces.resource/common.css.xhtml?ln=css" rel="stylesheet" type="text/css" />推断图片路径为”/egoshop-1.0.0/javax.faces.resource/img/one.gif“

那当然没有这个路径的了

   解决的办法是（如果按照标准的jsf应用资源目录）：

   background-image: url("../resources/img/one.gif");

    如果不用jsf的图片引用路径为：

    background-image: url("../img/one.gif");

    看多了什么？

    如果以后我们不用jsf技术了，要移植到其他的应用中，这些图片路径还得重新去掉”/resources“

    无语吧？

    jsf是给我们带来了方便，可也带来了麻烦和很多不必要的多余的标签和累赘代码，如泥用jsf表单时他生成了很多累赘代码

   

转载于:https://my.oschina.net/u/436274/blog/114245