使用h:outputStylesheet时未呈现图像

Question

我使用的是JSF2.0资源管理机制。在/webapp/resources下，我有3个子文件夹:图像、脚本、样式。在我的模板文件myLayout.xhtml中，我按如下方式引用样式表

    <h:outputStylesheet name="styles/styles.css"/>

我把我所有的背景图片放在styles.css文件中，如下所示：

    body {
           background: #fff url(../images/body_background.png) repeat -x;
    }

    #header {
           background: transparent url(../images/header_bg.png) no-repeat top right;
    }

我的所有页面facelets都位于/webapp/facelets子文件夹下，而模板文件位于/webapp/template下。我的facelet page.xhtml引用模板如下：

   <ui:compsition .... template="/template/myLayout.xhtml">

那么页面布局是正确的，除了所有的背景图像都丢失了。我检查了日志，发现了以下错误：

    java.io.FileNotFoundException: SRVE0190: File not found: /javax.faces.resource/images/body_background.png
    java.io.FileNotFoundException: SRVE0190: File not found: /javax.faces.resource/images/header_bg.png

然后我将css文件中的url引用从

    url(../images/body_background.png)

到url(/i

Answer 1

您需要在EL中通过#{resource}引用CSS图像资源，这样它才能打印出正确的JSF资源URL。

body {
    background: #fff url(#{resource['images/body_background.png']}) repeat -x;
}

#header {
    background: transparent url(#{resource['images/header_bg.png']}) no-repeat top right;
}