< p：commandButton>与图标图像不显示 [英] <p:commandButton> with icon image not showing

问题描述

我一直在努力这一段时间。我使用的表面3.5。我有一个带有icon属性的命令按钮。但是图像似乎没有显示。我不知道如果我把图像url正确。我试了几条路。但仍然不工作。在firebug中我可以看到这个图标。

我的图片驻留在/ BelsizeWeb / WebContent / theme / primefaces-aristo / images
驻留在/ BelsizeWeb / WebContent / theme / primfaces-aristo

theme.css

  .ui-icon-excel {
 background-image：url（images / toexcel.gif）; 
} 
  

xhtml

 < link type =text / css =stylesheet
 href =＃{request.contextPath} / theme / primefaces-aristo /theme.css/> 
 
< p：commandButton type =submit
 styleClass =commandExButton_imageid =cr1001_command_toexcel
 icon =ui-icon-excel
 =＃{pc_Cr1001.doCr1001_command_toexcelAction}ajax =false> 
< / p：commandButton> Icon属性将与PrimeFaces（jQuery UI）的预定义一起使用。
  

解决方案

为了解决您的需求，有两种方法。

>使用p：commandButton的图片

修改您的css类，如下所示：

  .ui-icon-excel {
 background：url（images / toexcel.gif）no-repeat top left！important ;; 
} 
  

然后使用您的命令按钮，如下所示，

 < p：commandButton type =submit
 id =cr1001_command_toexcel
 image =ui-icon-excel
 action =＃{pc_Cr1001.doCr1001_command_toexcelAction}ajax =false> 
< / p：commandButton> 
  
 
 
 
  2。使用jsf h：commandButton如下所示，
 < h：commandButton image =images / toexcel.gif/> 
  
您可以ajaxify h：commandButton进一步
 
I have been struggling this for a while. I am using primefaces 3.5. I have a command button with icon attribute. But the image seems not showing. I am not sure if I put the image url correctly. I tried a few path. But still not working. In firebug I can see the icon.

My image residing on /BelsizeWeb/WebContent/theme/primefaces-aristo/images
CSS residing on /BelsizeWeb/WebContent/theme/primefaces-aristo

theme.css       
.ui-icon-excel {
    background-image: url("images/toexcel.gif");
}
xhtml
<link type="text/css" rel="stylesheet"
  href="#{request.contextPath}/theme/primefaces-aristo/theme.css" />

<p:commandButton type="submit"
                 styleClass="commandExButton_image" id="cr1001_command_toexcel"
                 icon="ui-icon-excel"
                 action="#{pc_Cr1001.doCr1001_command_toexcelAction}" ajax="false">
              </p:commandButton>

解决方案
Icon property will work with PrimeFaces (jQuery UI's) predifinded icon's only.

To solve your requirement there are two ways.

1. Using Image of p:commandButton

Modify you css class as shown below,
     .ui-icon-excel {
            background: url("images/toexcel.gif")  no-repeat top left !important;;
     }
Then use your command button as shown below,
<p:commandButton type="submit"
             id="cr1001_command_toexcel"
             image="ui-icon-excel"
             action="#{pc_Cr1001.doCr1001_command_toexcelAction}" ajax="false">
          </p:commandButton>
2. Use jsf h:commandButton as shown below,
<h:commandButton image="images/toexcel.gif"/>
You can ajaxify h:commandButton further

                        
这篇关于&lt; p：commandButton&gt;与图标图像不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！