如何将 JSF 图像资源引用为 CSS 背景图像 url [英] How to reference JSF image resource as CSS background image url

问题描述

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

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:

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

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

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

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

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

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

<h:commandButton styleClass="c2"/>

我认为问题出在 .css 中，我尝试了几种组合，但都没有奏效:

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

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

错在哪里?

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

update I managed to make it work by the following code:

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

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

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

我该如何解决这个问题才能显示保留图像?

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

推荐答案

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

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

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

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

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

由

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

假设您的 webapp 上下文名称是 playground 并且您的 FacesServlet 映射在 *.xhtml 上，那么上面的内容应该以返回的CSS文件如下

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

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

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

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.

如果您想从组件库(例如 PrimeFaces)中引用资源，请添加库名称的前缀，并以 : 分隔.例如.当您使用 PrimeFaces 开始"时；由 primefaces-start

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

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

另见:

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

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

Unrelated to the concrete problem, the way how you use the library is 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 default library. In that case, you could just omit the library from your <h:outputStylesheet> and #{resource}.

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

另见:

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

这篇关于如何将 JSF 图像资源引用为 CSS 背景图像 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！