如何将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