JSF2.0中CSS图像相对路径的写法

     在JSF2.0中，css、javascript、images应放在resources文件夹中。

 

    在页面中，使用如下JSF标签引用：

<h:outputStylesheetlibrary="css"name="style.css"/>

<h:outputScript library="javascript" name="jsf.js" target="head" />

<h:graphicImage library="images" name="logo.png" />

    注意，以上标签要与JSF2.0新引入的<h:head>、<h:body>组合使用，在使用richfaces4时，有时可能需要将<h:outputStylesheet><h:outputScript>放在<h:body>的末尾。

    使用<h:outputStylesheet>导入CSS后，发现原来CSS中的image url相对路径不能显示图片了？是什么原因造成的呢？看一下html输出结果就明白了：

    <link href="/JavaSeverFaces/javax.faces.resource/style.css.xhtml?ln=css" rel="stylesheet" type="text/css"/>

    加载图像的路径是相对于css文件的request URL的，而不是相对于实际的物理路径。要在css中使用相对路径写法如下：

background-image:url("../resources/images/logo.png");

    绝对路径，使用EL表达式

background-image: url("#{resources['images:logo.png']}");

或

background-image: url('#{facesContext.externalContext.requestContextPath}/resources/images/logo.png')