Question

我经常使用图像属性更改按钮的图像，但是有人告诉我使用.css这是一个很好的做法我试过但我不能，我做错了什么？这就是我所做的：

1 - 我的项目资源存储如下：

enter image description here

2 - 这就是我创建style.css以访问图像的方式

.c2 {
    background: url(/resources/images/smiley.jpg);  
}

3 - 这是我从我的页面正文中访问css的方式（我确定这是正确的，因为同一文档中的其他类可以在此页面的其他标记中使用）

<h:outputStylesheet library="css" name="style.css"  />

4 - 这是创建使用适当的css类的示例commandButton的方法

<h:commandButton styleClass="c2"/>

我认为问题出现在.css中，我尝试了几种组合但没有效果：

background-image: url(/resources/images/smiley.jpg);    
background: url(resources/images/smiley.jpg);   
background: url(smiley.jpg);    
background: url(../smiley.jpg);

错误在哪里？

更新的我设法通过以下代码使其工作：

.c2 {   
     background: url("#{resource['images:smiley.jpg']}");               
    }

注意使用css（右）和使用image属性（左）时的区别

enter image description here

我如何解决这个问题，以便显示保持图像？

Answer 1

按<h:outputStyleSheet>导入CSS样式表时，样式表由FacesServlet到/javax.faces.resource/*导入和处理。查看指向相关样式表的生成的<link>元素，您将理解。

您必须更改所有url()依赖项才能使用#{resource['library:location']}。然后，JSF将使用正确的路径自动替换它。鉴于您的文件夹结构，您需要替换

.c2 {
    background: url("/resources/images/smiley.jpg");  
}

通过

.c2 {
    background: url("#{resource['images/smiley.jpg']}");  
}

假设您的webapp上下文名称为playground并且您的FacesServlet已映射到*.xhtml，则上述内容应最终返回到返回的CSS文件中，如下所示

.c2 {
    background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}

注意应该是JSF实现仅在CSS文件的第一个请求期间确定它是否包含EL表达式。如果没有那么它将为了效率而不再尝试EL评估CSS文件内容。因此，如果您是第一次将EL表达式添加到CSS文件中，那么您需要重新启动整个应用程序才能让JSF重新检查CSS文件。

如果您想从组件库（如PrimeFaces）引用资源，请在库名称前加上前缀，并以:分隔。例如。当您使用由primefaces-start

标识的PrimeFaces“开始”主题时

.c2 {
    background: url("#{resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']}");  
}

这将生成为

.c2 {
    background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
}

另见：

对具体问题

无关，使用library的方式并不完全正确。它应该是所有相关CSS / JS /图像资源的公共标识符/子文件夹。关键的想法是只需更改library（可以通过EL完成）就可以改变整个look'n'feel。但您似乎依赖于默认库。在这种情况下，您可以省略library和<h:outputStylesheet>中的#{resource}。

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

另见：

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

Answer 2

由于我在这方面有点挣扎，而BalusC已经回答了这个问题，但可能会评论为什么会发生这种情况。我有5个EAR项目，包括捆绑的WAR和EJB项目。然后，我自己部署了一个独立的WAR项目。以下代码适用于所有EAR：

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Super FIPS Calculator PRO</title>
    <style>              
        .Bimage{background-image:url(#{request.contextPath}/img/phonetoolsBackground.png);}
    </style>
</h:head>
<h:body styleClass="Bimage">
.
.
.

＆＃34; img＆＃34;文件夹在WEB-INF文件夹中，但是对于EAR项目，它不起作用，甚至不能通过手动输入URL将图片加载到浏览器中。我验证了生成的HTML是100％准确的。所以谈论＆＃34;资源＆＃34;让我想到也许这是一个安全？在WAR和EAR部署之间似乎没有任何意义的问题，所以我创建了一个＆＃34;资源＆＃34;文件夹在Web应用程序的根目录中，例如，在Eclipse中，它的父级是WebContent，然后在名为＆＃34; img＆＃34;的资源中添加了一个子文件夹，将我的图像放在那里。

现在代码如下：

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Super FIPS Calculator PRO</title>
    <style>              
        .Bimage{background-image:url(#{request.contextPath}/resources/img/phonetoolsBackground.png);}
    </style>
</h:head>
<h:body styleClass="Bimage">
.
.
.

现在显示图像。再次没有试图劫持balusc的彻底答案，我只是想提起它以防万一有人遇到类似的问题。如果有人要我打开一个单独的Q和A我会的！

啊，是的，这是在JBoss EAP 7，Servlet API 3.1，Facelets 2.2，Rich Faces 4.5.17 Java 1.8上。

编辑 @ Basil-Bourque回答What is WEB-INF used for in a Java EE web application似乎相当相关

但它仍然有点令人困惑，因为EAR中的WAR如何访问该位置而不是独立的WAR？

如何将JSF图像资源引用为CSS背景图像url

2 个答案:

另见：

另见：