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

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

1 – 我的项目的资源是这样存储的：

在这里输入图像描述

2 – 这是我创buildstyle.css来访问图像 

.c2 { background: url(/resourceshttp://img.dovov.comsmiley.jpg); }

3 – 这是我如何从我的页面的身体访问CSS（我确定这是正确的，因为在同一文档中的其他类在此页面中的其他标签） 

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

4 – 这是如何创build一个使用appssiated css类的示例commandButton 

 <h:commandButton styleClass="c2"/>

我认为问题是在.css中，我尝试了一些组合，但没有工作： 

 background-image: url(/resourceshttp://img.dovov.comsmiley.jpg); background: url(resourceshttp://img.dovov.comsmiley.jpg); background: url(smiley.jpg); background: url(../smiley.jpg);

错误在哪里？

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

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

注意当我使用CSS（右）和当我使用图像属性（左）

在这里输入图像描述

我怎么能解决这个问题，所以显示的图像？

当通过<h:outputStyleSheet>导入CSS样式表时，样式表由FacesServlet通过/javax.faces.resource/*导入和处理。 看看生成的<link>元素指向有问题的样式表，你就会明白。

你必须改变所有的url()依赖使用#{resource['library:location']} 。 然后，JSF将自动replace为正确的path。 鉴于你的文件夹结构，你需要更换 

 .c2 { background: url("/resourceshttp://img.dovov.comsmiley.jpg"); }

通过 

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

假设您的webapp上下文名称是playground ，并且您的FacesServlet被映射到*.xhtml ，那么上面应该以返回的CSS文件结束 

 .c2 { background: url("/playground/javax.faces.resourcehttp://img.dovov.comsmiley.jpg.xhtml"); }

值得注意的是，如果JSF实现包含ELexpression式，它将仅在CSS文件的第一个请求期间才能确定。 如果不这样做，那么效率就不会尝试EL评估CSS文件内容。 因此，如果您第一次将ELexpression式添加到CSS文件中，则需要重新启动整个应用程序才能让JSF重新检查CSS文件。

如果你想从一个组件库（如PrimeFaces）引用一个资源，那么在库名的前面加上: 。 例如，当您使用primefaces-start标识的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.resourcehttp://img.dovov.comui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start"); }

也可以看看：

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

与具体问题无关 ，你如何使用library方式并不完全正确。 它意味着所有相关的CSS / JS /图像资源的通用标识符/子文件夹。 关键的想法是能够通过改变library （可以通过EL来完成）来改变整个外观。 你似乎依赖于默认的库。 在这种情况下，您可以从<h:outputStylesheet>和#{resource}忽略该library 。 

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

也可以看看：

  • 什么是JSF资源库，以及如何使用它？

因为我在这方面有点挣扎，而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项目，它将不起作用，甚至不会通过手动inputURL来在浏览器中加载图片。 我核实了由此产生的HTML是100％准确的。 所以所有关于“资源”的讨论让我想到，也许这是一个“安全” 在WAR和EAR部署之间似乎没有任何意义的问题，所以我在Web应用程序的根目录下创build了一个“resources”文件夹，例如在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回答什么是在Java EE Web应用程序中使用的WEB-INF似乎相当相关

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

Interesting Posts