Visualizzazione del pulsante di comando con solo immagine

Question

Sto tentando di visualizzare un pulsante con l'immagine solo sulla mia pagina ma tutto quello che vedo è il pulsante con ^. Di seguito è riportato il codice per il mio pulsante:

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

L'immagine esiste nella cartella delle immagini. Il pulsante viene visualizzato come segue nella pagina:

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

Grazie !!!

Answer 1

L'attributo image deve fare riferimento a un nome di classe CSS, non a una semplice proprietà CSS. Quindi, questo dovrebbe fare:

<p:commandButton image="someCssClassName" /> 

con il seguente nel CSS:

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

Si prega di notare che ho fissato il maggiore errore di battitura nel nome della proprietà e anche rimosso la barra che conduce dal URL dell'immagine, sarebbe altrimenti risolto rispetto alla radice del dominio del sito; Quanto sopra si aspetta che lo title_logo.jpg si trovi all'interno di una cartella /image che a sua volta si trova nella cartella in cui si trova il file CSS.

Tuttavia, questo è meno goffo, penso:

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

Answer 2

messo sul vostro stile css:

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

Ora è possibile utilizzare il "dolar-icona" icona che è stata definita nel tuo css.

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

Answer 3

Ancora più facile:

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

Diferent icone è possibile scegliere: https://api.jqueryui.com/theming/icons/ e http://www.primefaces.org/showcase/ui/misc/fa.xhtml