仅显示带有图像的命令按钮 [英] Displaying command button with image only

问题描述

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

I am trying to display a button with image only on my page but all I see is the button with ^. Following is the code for my button:

<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>

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

The image does exist in the images folder. The button is rendered as following in the page:

<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>

谢谢！！！

推荐答案

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

The image attribute has to refer a CSS class name, not a plain CSS property. So, this should do:

<p:commandButton image="someCssClassName" /> 

在您的 CSS 中包含以下内容:

with the following in your CSS:

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

请注意，我修正了属性名称中的主要拼写错误，并从图像 URL 中删除了前导斜杠，否则它将相对于站点的域根进行解析；以上期望 title_logo.jpg 位于 /image 文件夹内，而该文件夹又位于 CSS 文件所在的文件夹中.

Please note that I fixed the major typo in property name and also removed the leading slash from the image URL, it would otherwise be resolved relative to the site's domain root; the above expects the title_logo.jpg to be inside an /image folder which in turn is in the folder where the CSS file resides.

但是，我认为这个不那么笨拙:

However, this one is less clumsy, I think:

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

这篇关于仅显示带有图像的命令按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！