为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

凤凰求蛊 2019-10-22 17:12:16

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

我经常用图像属性改变按钮的图像,但是有人告诉我用.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(右)和使用图像属性(左)时的区别

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



查看完整描述

3 回答

?
达令说

导入CSS样式表时<h:outputStyleSheet>,则导入样式表并由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表达式。如果没有,那么为了提高效率,它将不再尝试评估CSS文件内容。因此,如果您第一次向CSS文件添加EL表达式,则需要重新启动整个应用程序,以便使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背景图像上重新应用映射


不相干对于具体的问题,如何使用library并不完全正确。它是所有相关CSS/JS/Image资源的公共标识符/子文件夹。关键的想法是能够改变整个外观‘n’的感觉,只需改变library(这可以由EL来完成)。然而,您似乎依赖于违约图书馆。在这种情况下,您可以忽略library从你的<h:outputStylesheet>#{resource}.

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

另见:

  • JSF资源库的用途是什么,应该如何使用它?



查看完整回答
反对 回复 2019-10-23
?
HUWWW

因为我在这方面做了一些斗争,虽然BalusC已经回答了这个问题,但可能可以评论一下为什么会发生这种情况。我有5个EAR项目,包括捆绑的WAR和EJB项目。然后,我有一个独立的战争项目单独部署。以下代码非常适合所有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应用程序的根中创建了一个“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">.
.
.

现在图像被显示出来了。再一次,我没有试图劫持巴鲁斯克的彻底答案,我只是想提出来,以防任何人遇到类似的问题。如果有人想让我打开一个独立的Q和A,我会的!

啊,是的,这是在JBossEAP 7、ServletAPI 3.1、Facelets 2.2、RichFaces4.5.17Java1.8上实现的。

编辑@Basil-Bourque答复在JavaEEweb应用程序中使用的Web-INF是什么?似乎相当相关

但它仍然有点混乱,因为一个耳朵内的战争怎么能进入那个位置,而不是一场独立的战争呢?



查看完整回答
反对 回复 2019-10-23
?
冉冉说

我在页面中看到了生成的代码:<input type="submit" name="j_idt15" value="" class="c2">我注意到,当我使用图像属性而不是CSS时,我看到了以下情况:<input type="image" src="/demoapp/resources/images/smiley.jpg" name="j_idt14">您为类.c2提供的代码不起作用,但在您最后粘贴的链接上,有一个类似于我的示例,但只有当我更改页面的背景时,才适用于.css类。

查看完整回答
反对 回复 2019-10-23

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信