CODEWITHSUNDEEP
javascriptjqueryhtmlcssjsp
AKIWEB
AKIWEB

Reputation: 19612

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

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?

Upvotes: 0

Views: 649

Answers (2)

user3416023
user3416023

Reputation: 134

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

Upvotes: 1

Banana
Banana

Reputation: 7463

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.

Upvotes: 0

Related Questions