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

问题描述

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

1 - 我的项目的资源存储像这样：

>

2 - 这是我创建style.css以访问图片

  .c2 {
 background：url（/resources/images/smiley.jpg）; 
} 
  

3 - 这是我如何访问我的网页（确定这是正确的，因为同一文档中的其他类在此网页的其他标记中工作）

 < h：outputStylesheet library =cssname =style.css/> 
  

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

 < h：commandButton styleClass =c2/> 
  

我认为问题出在.css，我试过几个组合， p>

  background-image：url（/resources/images/smiley.jpg）; 
 background：url（resources / images / smiley.jpg）; 
 background：url（smiley.jpg）; 
 background：url（../ smiley.jpg）; 
  

错误在哪里？

b> update
我设法通过以下代码使它工作：

  .c2 {
 background：url（＃{resource ['images：smiley.jpg']}）; 
} 
  

请注意，当我使用css（右） （左）

解决方案

如何解决这个问题？通过< h：outputStyleSheet> 导入CSS样式表时，样式表将由 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实现将仅在第一个请求期间如果它包含EL表达式的CSS文件。如果它不然，它的效率不再试图EL评估CSS文件内容。因此，如果你第一次添加一个EL表达式到CSS文件，那么你需要重新启动整个应用程序，以获得JSF重新检查CSS文件。

如果您想要引用来自组件库（例如PrimeFaces）的资源，则使用：分隔的库名称前缀。例如。当您使用由 primfaces-start

标识的PrimeFacesStart主题时

  .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 =开始）; 
} 
  

另请参阅：

• 如何参考CSS / JS / image资源在Facelets模板中？


• 将JSF前缀更改为后缀映射会强制我重新应用CSS背景图片上的映射

---

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

 < h：outputStylesheet name =css / style.css/> 
  

另请参阅：

• 什么是如何使用JSF资源库？

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-The resources of my project are stored like this:

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

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

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

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

<h:commandButton styleClass="c2"/>

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); 

Where is the mistake?

update I 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)

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

解决方案

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.

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

by

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

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

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.

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

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:

• How to reference CSS / JS / image resource in Facelets template?
• Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images

---

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

See also:

• What is the JSF resource library for and how should it be used?

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