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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6925733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:10:15  来源:igfitidea点击:

How to reference JSF image resource as CSS background image url

cssjsfjsf-2resourcesbackground-image

提问by sfrj

I often, change the images of my buttons using the image attribute, but someone told me that it is a good practice to do it using .css I tried but i cant, what i am doing wrong? This is what i did:

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

1-The resources of my project are stored like this:

1-我项目的资源是这样存储的:

enter image description here

在此处输入图片说明

2-This is how i created the style.css for accessing the image

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

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

3-This is how i access the css from the body of my page(Im sure this is correct because other classes in the same document works in other tags in this page)

3-这是我从页面主体访问 css 的方式(我确定这是正确的,因为同一文档中的其他类在此页面的其他标签中工作)

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

4-This is how create a sample commandButton that uses the appropiated css class

4-这是如何创建一个使用适当的 css 类的示例 commandButton

<h:commandButton styleClass="c2"/>

I think the problem is in the .css, i tried a few combinations but none worked:

我认为问题出在 .css 中,我尝试了一些组合,但都没有奏效:

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

Where is the mistake?

错误在哪里?

updateI managed to make it work by the following code:

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

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

Notice the difference when i use css(right) and when i use image attribute(left)

请注意我使用 css(右)和使用图像属性(左)时的区别

enter image description here

在此处输入图片说明

How could i solve this so the hold image is shown?

我怎样才能解决这个问题,以便显示保持图像?

回答by BalusC

When importing CSS stylesheets by <h:outputStyleSheet>, the stylesheet is imported and processed by the FacesServletthrough /javax.faces.resource/*. Look at the generated <link>element pointing to the stylesheet in question and you'll understand.

导入 CSS 样式表时<h:outputStyleSheet>,样式表由FacesServletthrough导入和处理/javax.faces.resource/*。查看<link>指向相关样式表的生成元素,您就会明白。

You have to change all url()dependencies to use #{resource['library:location']}instead. JSF will then auto-substitute it with the right path. Given your folder structure, you need to replace

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

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

by

经过

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

Assuming that your webapp context name is playgroundand that your FacesServletis mapped on *.xhtml, then the above should end up in the returned CSS file as follows

假设您的 webapp 上下文名称是playground并且您FacesServlet被映射到*.xhtml,那么上面的内容应该在返回的 CSS 文件中结束,如下所示

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

Noted should be that the JSF implementation will for determine only during the first request on the CSS file if it contains EL expressions. If it doesn't then it will for efficiency not anymore attempt to EL-evaluate the CSS file content. So if you add an EL expression to a CSS file for the first time, then you'd need to restart the whole application in order to get JSF to re-check the CSS file.

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

In case you wanted to reference a resource from a component library such as PrimeFaces, then prefix the library name, separated with :. E.g. when you're using PrimeFaces "Start" theme which is identified by primefaces-start

如果您想从组件库(如 PrimeFaces)中引用资源,请在库名称前加上前缀,以:. 例如,当您使用 PrimeFaces“开始”主题时,该主题由primefaces-start

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

This will be generated as

这将生成为

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

See also:

也可以看看:



Unrelatedto the concrete problem, the way how you use the libraryis not entirely right. It's meant to be the common identifier/subfolder of all related CSS/JS/image resources. The key idea is to be able to change the entire look'n'feel by just changing the library(which can be done by EL). You seem however to be relying on the defaultlibrary. In that case, you could just omit the libraryfrom your <h:outputStylesheet>and #{resource}.

具体问题无关,您如何使用 的library方式并不完全正确。它是所有相关 CSS/JS/图像资源的公共标识符/子文件夹。关键思想是能够通过仅更改library(可以由 EL 完成)来更改整个外观。然而,您似乎依赖于默认库。在这种情况下,您可以library<h:outputStylesheet>and 中省略#{resource}

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

See also:

也可以看看:

回答by JGlass

Since I struggled with this a little bit and while BalusC has already answered the question but might be able to comment as to why this is happening. I have 5 EAR projects consisting of a bundled WAR and EJB projects. I then have one standalone WAR project deployed on its own. The following code worked perfect with all the EAR's:

由于我对此有点挣扎,而 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">
.
.
.

Where the "img" folder was within the WEB-INF folder but for the EAR project, it would not work and it wouldnt even load the picture in the browser by manually typing in the URL. I verified the resulting html was 100% accurate. So all the talk of "resources" got me thinking that maybe it was a ?security? issue of some sort which doesnt seem to make sense between the WAR and EAR deployments so I created a "resources" folderin the root of the web application, e.g. in Eclipse its parent would be WebContent, then added a subfolder to resources called "img", placed my image in there.

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

The code now looks like this:

代码现在看起来像这样:

<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">
.
.
.

And now the image is displayed. Again not trying to hiHyman balusc's thorough answer, I just wanted to bring it up in case anyone ran into a similar issue. If someone wants me to open a separate Q and A I will!

现在显示图像。再次不是试图劫持 balusc 的彻底答案,我只是想提出来,以防有人遇到类似的问题。如果有人要我单独开Q和AI会的!

Ahh yes, this was on JBoss EAP 7, Servlet API 3.1, Facelets 2.2, Rich Faces 4.5.17 Java 1.8.

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

Edit@Basil-Bourque answer What is WEB-INF used for in a Java EE web applicationseems fairly relevant

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

But its still a little confusing in that how can a WAR within an EAR access that location but not a standalone WAR?

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