通过 JSF 在 css 中加载背景图像

Question

这是我的 css 文件 registrationStyle.css:

body{
    background-image: url("#{resources['images/blue.jpg']}");
}

我的 JSF 页面：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>User Registration</title>
        <h:outputStylesheet library="css" name="registrationStyle.css"/>
</h:head>
<h:body>
    This is registration page
</h:body>
</html>

项目结构：

但是无法显示图片！

更新

我想使用 <h:graphicImage 页面：

<h:graphicImage name="images/t1.jpg" library="default"/>

我试过这个：

<h:graphicImage name="t1.jpg" library="images"/>

但是它说 Unable to find resource default, images/t1.jpg ?

Answer 1

h:outputStylesheet 用于加载 CSS 文件，要在 JSF 页面中包含图像文件，您应该使用 h:graphicImage 标签，如下所示：

<h:graphicImage name="blue.jpg" library="images"/>

更新：

为了加载背景图像，最好的解决方案是遵循 Tiny 的建议（在评论中）并使用：

body{
    background-image: url("#{resource['images/blue.jpg']}");
}

另请参阅：

Tag graphicImage
What is the JSF resource library for and how should it be used?

通过 JSF 在 css 中加载背景图像

Load Background image in css by JSF

css

jsf

jsf-2