2011-11-03 21 views
13

Estoy tratando de mostrar un botón con imagen solo en mi página pero todo lo que veo es el botón con ^. A continuación se muestra el código de mi botón:Mostrar botón de comando con imagen solamente

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

La imagen existe en la carpeta de imágenes. El botón se representa como sigue en la página:

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

+0

¿realmente rinden 'image'-backgroung? – BalusC

+0

@BalusC esto es lo que representa: http://awesomescreenshot.com/0dnn5ueb – KunalC

+0

¿Por qué editó la pregunta para copiar esta propiedad de estilo incorrecta en el atributo 'image'? – BalusC

Respuesta

33

El atributo image tiene que referirse a un nombre de clase CSS , no es una propiedad de CSS simple. Por lo tanto, esto debería hacer:

<p:commandButton image="someCssClassName" /> 

con lo siguiente en su CSS:

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

Tenga en cuenta que me fijo el mayor error tipográfico en nombre de la propiedad y también se elimina la barra inicial de la URL de la imagen, se de lo contrario se resolvería en relación con la raíz del dominio del sitio; lo anterior espera que el title_logo.jpg esté dentro de una carpeta /image que a su vez se encuentra en la carpeta donde reside el archivo CSS.

Sin embargo, éste es menos torpe, pienso:

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

@Olivier: lea http://stackoverflow.com/ questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used para una pregunta relacionada sobre cómo usar los recursos JSF (esto es lo que apunta el atributo 'name' a). – BalusC

+0

hum ok. En mi caso, el atributo 'name' no funcionó porque no creé una biblioteca asociada a. Perdón por esta mala edición BalusC –

+1

@Olivier: Aparentemente no lo pones en la carpeta '/ resources'. El ejemplo particular en mi respuesta espera que el archivo de imagen esté en '/ resources/images/title_logo.jpg'. – BalusC

0

poner esto en su estilo css:

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

Ahora puede utilizar el icono "dolar-icono" que ha definido en tu css.

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