[英]Can't loading CSS images in JSF
Description : In my JSF application, I am setting the menu background images through CSS property. 描述:在我的JSF应用程序中,我通过CSS属性设置菜单背景图像。
I configured the file structure as follows 我按如下方式配置了文件结构
Style.css style.css文件
#menu
{
height:35px;
width:950px;
background:url(images/default.gif);
/*background:url(#{resource['images:default.gif']});
background:url(#{resource['images/default.gif']});
*/
}
and this CSS file is under /resources/css
directory, and I am importing the css file in Facelets page using 这个CSS文件在
/resources/css
目录下,我正在使用Facelets页面导入css文件
<h:head>
<h:outputStylesheet library="css" name="style.css"></h:outputStylesheet>
</h:head>
There is no problem in importing CSS file 导入CSS文件没有问题
Problem description 问题描述
I mapped the FacesServlet on *.xhtml: 我在* .xhtml上映射了FacesServlet:
<servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping>
If I run the home page , the menu images which is configured in css is not loading 如果我运行主页,则不会加载在css中配置的菜单图像
When I remove the FacesServlet
mapped configuration on *.xhtml
the images are is loading perfectly 当我删除
*.xhtml
上的FacesServlet
映射配置时,图像正在加载完美
i have tried 我试过了
I have tried the following methods in css file to load an image 我在css文件中尝试了以下方法来加载图像
background:url(images/default.gif);
background:url(#{resource['images:default.gif']});
background:url(#{resource['images/default.gif']});
But I couldn't find the solution yet. 但我还没找到解决方案。
Updated Solution 更新方案
Added Resource handler in faces-config.xml
在
faces-config.xml
添加了资源处理程序
<application><resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler> </application>
FacesServlet
Configuration in web.xml
web.xml
FacesServlet
配置
<servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> <url-pattern>/javax.faces.resource/*</url-pattern> </servlet-mapping>
Place images under /resources/images
directory 将图像放在
/resources/images
目录下
Image accessing format in css file css文件中的图像访问格式
#menu {background: url(images/bg.png) }
You can use the UnmappedResourceHandler by OmniFaces to solve that 您可以使用OmniFaces的UnmappedResourceHandler来解决这个问题
This resource handler will produce unmapped URLs like /javax.faces.resource/css/style.css.
此资源处理程序将生成未映射的URL,如/javax.faces.resource/css/style.css。 This has the major advantage that the developer don't need the #{resource} EL expression anymore in order to properly reference relative URLs to images in CSS files.
这具有以下主要优点:开发人员不再需要#{resource} EL表达式,以便正确地引用CSS文件中的图像的相对URL。
Or take a look at the similar question/answer over here: Prevent suffix from being added to resources when page loads 或者在这里看一下类似的问题/答案: 防止在页面加载时将后缀添加到资源
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.