background url and file organisation

I am changing background image dynamically, it works online but doesn't work as offline. This is how I open a web page http://localhost:8080/PROJECT/

web.xml

 <welcome-file-list>
    <welcome-file> myHTML/myHTML.html </welcome-file>
 </welcome-file-list>

CSS

#me { 
    background-url: url('image/me.jpg')
}

HTML

<div id="me"></div>

Project structure

I change background image dynamically from client side as follows:

<div id="me" style="background:url('/PROJECT/imageNew/your.jpg')"></div>

Now I just save this page to client(local) machine and check, but the image goes missing when page opens locally, it only works if I change in background url as follows:

 background: url(../PROJECT/imageNew/your.jpg)

But I don't want to make change each time after saving the file on client's machine. How can I specify a path which works in serv开发者_StackOverflow中文版er and client side?

It seems as if the problem stems from the fact that when running on the server, your code is executing from the root directory, whereas on the client's machine (I would imagine) you are not.

You should be able to use the second path you've posted (../PROJECT/imageNew/your.jpg) in both locations. You've already verified that this works on the client's machine, and on the server, the parent directory (../) should take no effect, as your code already appears to be executing on the root of the machine, thereby effectively making the path /PROJECT/imageNew/your.jpg, which is what it was before.

Hope this helps!