jsf - 仅显示图像的命令按钮

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>