How to use absolute path of an image in css using jquery?

Question

I am trying to use absolute path of my image while using it with jquery like this but somehow it is not loading any image once I see my page. Below is my code in testing.jsp file

<script>
$(document).ready(function(){
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url("/testweb/src/main/webapp/resources/img/page-loader.gif") no-repeat center'
    }).hide().appendTo('body');

    // Execute refresh with interval:
    setInterval(refresh, 30 * 1000);
});
</script>

Directory structure is like this -

webapp/
|-- resources/
|   +-- img/
|           page-loader.gif
+- WEB-INF/
  +-- views/
        testing.jsp

Is there anything wrong I am doing here?

The structure you show above has webapp as the root folder. If that's the case your image path should be /resources/img/page-loader.gif — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Mar 13, 2014 at 19:34
you're using a filesystem path. That's useless for something accessing your server's resources via http - a client cannot access anything outside the document root. try /resources/img/... instead — Marc B
– Marc B, Commented Mar 13, 2014 at 19:34
@Archer: In general when you create a project. There will be a project name which is testweb in my case and then you put your image in img directory which is in webapp folder. So when I right click my image and I click Copy Qualified Name in my eclipse, it gives me the full path as I provided in the question. — AKIWEB
– AKIWEB, Commented Mar 13, 2014 at 19:41
So what is the full url in the address bar when you got to testing.jsp? — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Mar 13, 2014 at 19:43
This is what I use on the browser - http://127.0.0.1:8080/testweb/testing — AKIWEB
– AKIWEB, Commented Mar 13, 2014 at 19:45

user3416023 · Accepted Answer · 2014-03-13 20:05:03Z

1

If I understand you correctly you can either use the URL of the image including domain: http://www.yourwebsite.com/webapp/resources/img/page-loader.gif or use relative path: ../../resources/img/page-loader.gif

answered Mar 13, 2014 at 20:05

user3416023

1341 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Banana · Accepted Answer · 2014-03-13 19:38:00Z

0

jquery runs on the client machine.

the image is located on the server machine.

if you specify absolute path using anything that runs on the client machine, it will not work because client cannot access the server directly.

you have to put the image in the website in some 'resources' or whatever folder, and use relative path.

answered Mar 13, 2014 at 19:38

Banana

7,4843 gold badges25 silver badges44 bronze badges

5 Comments

Reinstate Monica Cellio Over a year ago

He's not trying to access an image on the client. I'm not sure where you got that impression from.

Banana Over a year ago

archer please read my answer again before downvoting. i wrote that jquery is client side script and cannot access images on the server. i dont know where from you got the impression that i was speaking about images on the client.

Reinstate Monica Cellio Over a year ago

Okay - sorry that was a misunderstanding on my part. My apologies. The downvote remains though as what you are saying is even more incorrect than I thought!

Reinstate Monica Cellio Over a year ago

I think I understand where your misunderstanding comes from. If an image url begins with a forward slash then the browser will take the path from the root of the domain you are on. If it doesn't begin with a forward slash then it is taken as a relative address, from the folder the file is in (whether it's a css file or a web page). He doesn't want file:// when he says "absolute path" (but that will still work if the file is there.)

Banana Over a year ago

i see. i thought by absolute path he meant absolute as in c:/blabla/blabla which will not work.

Collectives™ on Stack Overflow

How to use absolute path of an image in css using jquery?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related