CSS h:outputStylesheet中的background-image:url(“")未加载 [英] background-image: url("") in CSS h:outputStylesheet is not loading

问题描述

很抱歉，如果未正确提出问题.图像在struts项目中显示良好，但在JSF2项目中却没有.所有的css和按钮都呈现良好的except image that has url in css.

Sorry if question is not properly asked. Image is showing fine in struts project but not in JSF2 project. All the css and buttons are rendering fine except image that has url in css.

文件夹结构

resources -> css -> bootstrap.min.css
resources -> img -> glyphicons-halflings.png

bootstrap.min.css

background-image: url("../img/glyphicons-halflings.png");

1- 如果我使用<h:outputStylesheet library="css" name="bootstrap.min.css"/>，则生成的背景图像URL是http://localhost:8000/img/glyphicons-halflings.png，因此图像未加载.应该是http://localhost:8000/resources/img/glyphicons-halflings.png

1 - if I use <h:outputStylesheet library="css" name="bootstrap.min.css"/> than background-image url generated is http://localhost:8000/img/glyphicons-halflings.png thus image not loading. It should be http://localhost:8000/resources/img/glyphicons-halflings.png

2-如果我使用<link href="#{request.contextPath}/resources/css/bootstrap.min.css" rel="styleSheet" type="text/css"/>而不是

Firefox-> Firebug->网络"标签{多次添加资源}

http://localhost:8000/resources/resources/img/glyphicons-halflings.png

不确定如何加载css中并应用于类的图像.

not sure how to load image which is in css and applied on class.

将编辑"图标显示为链接以单击到下一页.

show EDIT icon as link to click to next page.

 <h:outputLink value="edit.xhtml" >
                            <i class="icon-edit" ></i>
                            <f:param name="id" value="#{person.id}"/>
                        </h:outputLink>

推荐答案

您应该在CSS中使用EL变量#{resource}来指定图像资源.

You should be using the EL variable #{resource} in CSS to specify image resources.

background-image: url("#{resource['img/glyphicons-halflings.png']}");

另请参见:

• 如何将JSF图像资源引用为CSS背景图片网址

See also:

• How to reference JSF image resource as CSS background image url

这篇关于CSS h:outputStylesheet中的background-image:url(“")未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！