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

Question

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

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

2-这是我创建用于访问图像的 style.css

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

3-这是我从页面正文访问 css 的方式（我确信这是正确的，因为同一文档中的其他类在该文档中的其他标签中工作页）

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

4-这是如何创建一个使用适当的 css 类的示例命令按钮

<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（右）和使用图像属性（左）时的区别

我该如何解决此问题以便显示保留图像？

Answer 1

因为我在这个问题上遇到了一点困难，虽然 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">
.
.
.

“img”文件夹位于 WEB-INF 文件夹内，但对于 EAR 项目，它不起作用，甚至无法通过手动输入 URL 将图片加载到浏览器中。我验证了生成的 html 100% 准确。因此，所有有关“资源”的讨论都让我想到这可能是一种“安全”？某种问题在 WAR 和 EAR 部署之间似乎没有意义，因此我在 Web 应用程序的根目录中创建了一个“资源”文件夹，例如在 Eclipse 中，其父文件夹是 WebContent，然后向名为“img”的资源添加了一个子文件夹，将我的图像放在那里。

代码现在如下所示：

<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和AI会的！

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

编辑@Basil-Bourque答案WEB-INF 在 Java EE Web 应用程序中的用途 似乎相当相关

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

Answer 2

当通过 导入 CSS 样式表时，样式表由 FacesServlet 通过 /javax.faces.resource/*。查看生成的指向相关样式表的 元素，您就会明白。

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

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

为

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

假设您的 web 应用程序上下文名称为 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“Start”主题时，

.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");
}

另请参阅：

• 如何在 Facelets 模板中引用 CSS / JS / 图片资源？
• 将 JSF 前缀更改为后缀映射迫使我重新应用 CSS 背景图像上的映射

---

与具体问题无关，您使用库的方式与完全正确。它是所有相关 CSS/JS/图像资源的通用标识符/子文件夹。关键思想是能够通过更改库（可以通过 EL 来完成）来更改整个外观。然而，您似乎依赖于默认库。在这种情况下，您可以从 和 #{resource} 中省略 library。

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

另请参阅：

• 什么是JSF 资源库的用途以及如何使用？