Skip to main content

404 on image referenced by css file included in the page

3 replies [Last post]
tracker09
Offline
Joined: 2007-09-07

I have a page that references images directly and some that are referenced by an included css. Using the new resourcing for 2.0, I am able to display the images directly. An example of this can be seen below.

The URL generated in the browser looks like this.

http://localhost:8080//IceFacesTestApp2/javax.faces.resource/arrow-next....

That is working fine. However, when I have an image referenced by the included css file, it is not found.

This is an example of such a reference taken from my css file.
.iceCmdSrtHdrAsc{
background-image: url('./css-images/column_sort_asc.gif');
}

Using firebug, I can see that it is generating this URL
http://localhost:8080//IceFacesTestApp2/javax.faces.resource/css-images/...

If I directly type the following into the browser, I can see the image

http://localhost:8080//IceFacesTestApp2/javax.faces.resource/column_sort...

How can I change things so that this image if found properly? It is worth mentioning that the resources are packaged into a separate jar that is bundled into my application. The resources are all found under the META-INF/resources directory. The images are found in a subdirectory called css-images

The css is referenced as followed in the head of the page.

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
tracker09
Offline
Joined: 2007-09-07

P.S. I was able to hack my css to get this working, but I'm sure there is a "correct" way to do this.

razib
Offline
Joined: 2010-01-28

A convenient way to do this is:

.iceCmdSrtHdrAsc{
background-image: url(#{resource['./css-images/column_sort_asc.gif']});
}

tracker09
Offline
Joined: 2007-09-07

I was able to get it working like this but I'll try your method. It looks cleaner.

background-image: url('column_sort_asc.gif.jsf?ln=css-images');

Thanks