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()}" />

Is that enormous whitespace around the button really necessary? Can't you be bothered to cut it out in order to make your post more professional and representative? — BalusC, May 24 '13 at 13:12
As to the concrete problem, please tell the full URL of the CSS file and the full URL of the image file, then we can tell you how to extract the right image URL form it for usage in the CSS file (the "full URL" is exactly the URL which you see in browser's address bar when you individually request the CSS file and image file). — BalusC, May 24 '13 at 13:12
the image is under the WebContent / image file on my project with eclipse — Adriano_jvma, May 24 '13 at 13:18
How does the generated HTML look like? Is the css class loaded, is the imagepath correct? Have a look with firebug and provide some more information. — Sonic, May 24 '13 at 13:19
Why don't you want to help us to help you? Tell the full URL of the page and the image file. — BalusC, May 24 '13 at 13:20
Have a look at this, how you specify the correct image path: http://stackoverflow.com/questions/1013057/how-do-i-add-background-images-in-a-jsf-application-using-richfaces-and-css — Sonic, May 24 '13 at 13:53
The image path which you posted there is not the full URL. What is the full URL wherein you see the image? Is it http://localhost:8080/JEE/image/add.jpg ? Please open it in your webbrowser and fix the URL in browser address accordingly so that the image is visible and then tell it. — BalusC, May 24 '13 at 14:11
Yes it is the full path of image !!it is showin when I run it — Adriano_jvma, May 24 '13 at 14:19
.imagesbuton{ background:url("http://localhost:8080/JEE/image/add.jpg"); width: 30 !important; height: 30 !important;} — Adriano_jvma, May 24 '13 at 14:20

BalusC · Accepted Answer · 2013-05-24T14:27:28.663

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");
}

This is a different problem unrelated to the initial question. — BalusC, May 24 '13 at 14:27

Button not displaying image

1 Answers1