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

请注意我修复了属性名称中的主要拼写错误，并且还删除了图片网址中的前导斜杠，否则将相对于网站的域根解析;以上内容要求title_logo.jpg位于/image文件夹中，该文件夹又位于CSS文件所在的文件夹中。

然而，我觉得这个不那么笨拙了：

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

Answer 2

我建议同时使用“ P：coomandLink”和“ P：graphicImage”。我在webapps下创建了一个文件夹，并将我的jpg文件放在该文件夹下。这段代码对我来说很好用。祝你好运。

<p:commandLink action="#{MyClass.myMethod}">
   <p:graphicImage value="images/Max-Burger.jpg"  />
</p:commandLink>

Answer 3

把它放在你的css风格上：

    .dolar-icon {
    background-image: url("#{facesContext.externalContext.request.contextPath}/resources/imagenes/dolar.png") !important;}

现在您可以使用您在CSS中定义的“dolar-icon”图标。

<p:commandButton action="#{as.fe}" icon="dolar-icon"/>

Answer 4

更容易：

<p:commandButton icon="ui-icon-XXXXX">

您可以选择不同的图标：https://api.jqueryui.com/theming/icons/和http://www.primefaces.org/showcase/ui/misc/fa.xhtml

仅显示带图像的命令按钮

4 个答案: