web-dev-qa-db-fra.com

Affichage du bouton de commande avec image uniquement

J'essaie d'afficher un bouton avec une image uniquement sur ma page, mais tout ce que je vois est le bouton avec ^. Voici le code pour mon bouton:

<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'image existe dans le dossier images. Le bouton est rendu comme suit dans la 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>

Merci!!!

jsfjsf-2primefaces
16
KunalC

L'attribut image doit faire référence à un CSS nom de classe , pas à une propriété CSS simple. Donc, cela devrait faire:

<p:commandButton image="someCssClassName" />

avec ce qui suit dans votre CSS:

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

Veuillez noter que j'ai corrigé la faute de frappe principale dans le nom de la propriété et également supprimé la barre oblique de l'URL de l'image. Elle serait sinon résolue par rapport à la racine du domaine du site. Ce qui précède s'attend à ce que le title_logo.jpg se trouve dans un dossier /image, lui-même situé dans le dossier contenant le fichier CSS.

Cependant, celui-ci est moins maladroit, je pense:

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

Je suggère d'utiliser "P: coomandLink" et "P: graphicImage" en même temps . J'ai créé un dossier sous webapps et ai placé mon fichier jpg dans ce dossier . Ce code me convient parfaitement. bonne chance.

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

Mettez ceci sur votre style css:

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

Maintenant, vous pouvez utiliser l'icône "dolar-icon" que vous avez définie dans votre css.

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