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

css教程 2013-09-08

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

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

    在页面中,使用如下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')
 

相关推荐