18

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>

Thanks!!!

KunalC
  • 524
  • 1
  • 7
  • 20
  • Did it really render `backgroung-image`? – BalusC Nov 04 '11 at 00:00
  • @BalusC this is what it rendered: http://awesomescreenshot.com/0d9nm5ueb – KunalC Nov 04 '11 at 00:11
  • Why did you edit the question to copy this incorrect style property in the `image` attribute? – BalusC Nov 04 '11 at 00:47
  • What code do you **really** have (in XHTML file) and what did it **really** render? (in the HTML source)? Please do not edit the copypaste, you'll possibly remove the error without actually realizing it or even introduce new errors (like with your last edit). – BalusC Nov 04 '11 at 01:46
  • @BalusC I am sorry for editing the code. This is actually what's there right now and what's rendered. – KunalC Nov 04 '11 at 02:34
  • @BalusC I was trying out different things and had two tabs open for the same page. So I copied the rendered html from the older version. – KunalC Nov 04 '11 at 02:54
  • possible duplicate of [My own primefaces p:commanButton icon](http://stackoverflow.com/questions/17619707/my-own-primefaces-pcommanbutton-icon) – blo0p3r May 15 '14 at 15:43

4 Answers4

43

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

<p:commandButton image="someCssClassName" />

with the following in your CSS:

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

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>
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • @Olivier: please read http://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used for a related question on how to use JSF resources (this is what the `name` attribute is pointing to). – BalusC Jan 08 '13 at 00:03
  • hum ok. In my case the `name` attribute did not work because I didn't create library associated to. Sorry for this bad edit BalusC – Olivier J. Jan 08 '13 at 09:05
  • 1
    @Olivier: Apparently you didn't put it in `/resources` folder. The particular example in my answer expects the image file to be in `/resources/images/title_logo.jpg`. – BalusC Jan 08 '13 at 14:33
  • Note that the `image` attribute has now been deprecated, use `icon` attribute instead. – Kuba Spatny Feb 08 '15 at 10:25
  • Migrating from richfaces.. the only one to work its the commanLink, without adding more css. – cabaji99 Nov 21 '18 at 18:53
2

I suggest to use "P:coomandLink" and "P:graphicImage" at the same time. I have created a folder under webapps, and put my jpg file under this folder. This code works fine for me. good luck.

<p:commandLink action="#{MyClass.myMethod}">
   <p:graphicImage value="images/Max-Burger.jpg"  />
</p:commandLink>
Reza
  • 1,906
  • 1
  • 17
  • 21
0

Put this on your css style:

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

Now you can use the icon "dolar-icon" that you defined in your css.

<p:commandButton action="#{as.fe}" icon="dolar-icon"/>
Raul Serra
  • 33
  • 7
-1

Even easier:

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

Diferent icons you can choose: https://api.jqueryui.com/theming/icons/ and http://www.primefaces.org/showcase/ui/misc/fa.xhtml

GBS
  • 124
  • 1
  • 3
  • 16