仅显示带图像的命令按钮

Question

我试图只在我的页面上显示一个带图像的按钮,但我看到的只是带有^的按钮.以下是我的按钮的代码:

<p:commandButton onclick="lineSearch.show();" image="backgroung-image:url(/images/title_logo.jpg)"/> 
<p:dialog header="Modal Dialog" widgetVar="lineSearch" modal="true" onCloseUpdate="lineIdField" showEffect="scale" hideEffect="explode">  
    <ui:include src="lineSearch.xhtml"/>
</p:dialog>

图像确实存在于images文件夹中.该按钮在页面中呈现如下:

<button id="j_idt23:j_idt27" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" type="submit" onclick="lineSearch.show();;PrimeFaces.ab({formId:'j_idt23',source:'j_idt23:j_idt27',process:'@all'});return false;" name="j_idt23:j_idt27" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon backgroung-image:url(/images/title_logo.jpg)"></span>
    <span class="ui-button-text">ui-button</span>
</button>
<script type="text/javascript">
    widget_j_idt23_j_idt27 = new PrimeFaces.widget.CommandButton('j_idt23:j_idt27', {text:false,icons:{primary:'backgroung-image:url(/images/title_logo.jpg)'}});
</script>

谢谢!!!

Answer 1

该image属性必须引用CSS 类名,而不是普通的CSS属性.所以,这应该做:

<p:commandButton image="someCssClassName" /> 

在CSS中使用以下内容:

.someCssClassName {
    background-image: url(images/title_logo.jpg)
}

请注意,我修复了属性名称中的主要拼写错误,并从图像URL中删除了前导斜杠,否则将相对于站点的域根解析; 上面title_logo.jpg要求它位于一个/image文件夹里面,而该文件夹又位于CSS文件所在的文件夹中.

但是,我觉得这个不那么笨拙了:

<p:commandLink action="#{bean.submit}">
    <h:graphicImage name="images/title_logo.jpg" />
</p:commandLink>