Button not displaying image

Question

I followed every example here

But nothing seems to work.

I try to add an image to my command button but ..

.imagesbuton{
    background-image:url("/image/add.jpg") !important ;
    width: 30;  
    height: 40;}


<p:commandButton  image="imagesbuton" rendered="#{LigneXL.resultat eq 'N existe pas'}"   action="#{composantbean.initialise()}" /> 

Answer 1

Okay, the full URL of the page wherein the <style> element is declared is thus:

http://localhost:8080/JEE/pages/Menu.jsf

And the full URL of the image file which you'd like to use in <style> is not explicitly specified by you, but this based on the information provided so far most probably:

http://localhost:8080/JEE/image/add.jpg 

Your concrete problem is most likely caused by that you somehow expected that it's the server who inlines the images in the HTML document based on the server's project structure. This is however utterly wrong. It's instead the webbrowser who downloads the image separately relative to the URL of the main resource referencing the image resource (which can be either a CSS file or in your case thus the JSF page itself) and includes it in the rendered HTML representation.

Thus, when you specify url("/image/add.jpg") with a leading slash, which would make it a domain-relative URL, then the browser will attempt to download the image from:

http://localhost:8080/image/add.jpg 

However, this is wrong. If you have paid attention to the HTTP traffic in browser's developer toolset, then you should have noticed that the browser retrieved a HTTP 404 error on the image request. You need to include the context path if you need to specify a domain-relative URL. You can do that either statically:

.imagesbuton {
    background-image: url("/JEE/image/add.jpg");
}

or dynamically:

.imagesbuton {
    background-image: url("#{request.contextPath}/image/add.jpg");
}

Alternatively, you can use a relative URL whereby you go one folder up from /JEE/pages to /JEE and then to the /image folder:

.imagesbuton {
    background-image: url("../image/add.jpg");
}