我试过,但我不能,我做错了什么?这是我做的:
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中,我尝试了一些组合,但没有工作:
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(右)和当我使用图像属性(左)时的区别
@H_301_32@解决方法
您必须更改所有url()依赖关系以使用#{resource [‘library:location’]}。 JSF将自动替换为正确的路径。给定您的文件夹结构,您需要更换
.c2 { background: url("/resources/images/smiley.jpg"); }
通过
.c2 { background: url("#{resource['images/smiley.jpg']}"); }
假设您的webapp上下文名称是游乐场,并且您的FacesServlet映射到* .xhtml,则上述应该在返回的CSS文件中结束如下
.c2 { background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml"); }
应该注意的是,JSF实现将仅在CSS文件的第一个请求中确定,如果它包含EL表达式。如果不这样做,效率就不会再试图EL评估CSS文件内容了。因此,如果您首次向CSS文件添加EL表达式,那么您需要重新启动整个应用程序才能使JSF重新检查CSS文件。
如果您想从一个组件库(如PrimeFaces)中引用资源,那么在库名称前面加上:。例如。当您使用PrimeFaces“开始”主题,由主题 – 开始标识
.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"); }
也可以看看:
> 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
与具体问题无关,使用图书馆的方式并不完全正确。它是所有相关CSS / JS /图像资源的常用标识符/子文件夹。关键的想法是通过改变图书馆(可以通过EL完成)来改变整个外观。你似乎依靠默认的库。在这种情况下,您可以从< h:outputStylesheet>中省略库。和#{resource}。
<h:outputStylesheet name="css/style.css" />
也可以看看:
> What is the JSF resource library for and how should it be used?
@H_301_32@ @H_301_32@