1

These days I meet so many problems about the path in css and js. And after a few tests,I can not have a exact answer,so i ask here for help.

1 The file and structure.

1)test.css

 body{backgorund-image:url(img/bg.gif);} 

2)test/js

  icon:img/icon.gif

3)example.html

  <html>
    <link.... src=css/test.css>
    <script ... src=js/test.js>
    ....
  </html>

4)example_sub.html

  <html>
    <link.... src=../css/test.css>
    <script ... src=../js/test.js>
    ....
  </html>

5)structue:

+img
   icon.gif
   bg.gif
+css
   test.css
+js
   test.js
example.html
+subfolder
   example_sub.html

2 question

The example.html work,but the example_sub.html does not work,the icon.gif is missed.

So I wonder if the test.js is a common js which will be used in all the page,so all these pages should be put in the same directory?

How does the path work,I mean how does the browser find the image according the image path?

It seems that the manner in css are not the same as it in js.

Anyone can give me a clearly answer?

BTW,my pages are all jsp,so they are work inder the servlet container.

If I use the absolute path like:

xxxx src="/img/icon.gif"

It will try to find http//localhot:8000/img/icon.gif. Of cource it will get a 404 error.

Any ideas?

4 Answers 4

8

CSS

Paths in CSS are relative to the location of the stylesheet. If it is a linked stylesheet, then it is the path of the CSS file. If it is embedded in an HTML document (with the style element or attribute) then it is relative to the HTML document.

JavaScript

JavaScript generally manipulates other documents. Any paths mentioned depend on what manipulation was done to the document. If you use JS to add a style attribute which includes a URL, then that URL is relative to the HTML document since the style attribute is part of that.

Where you aren't manipulating the document directly (because I'm editing this almost a decade later and things like Ajax are now common) then the path is relative to the HTML document.

If I use the absolute path like src="/img/icon.gif" It will try to find http//localhot:8000/img/icon.gif. Of cource it will get a 404 error.

Why "of course"? Make sure that path exists, and you have no problems. Relative URLs with absolute paths (i.e. ones starting with /) are usually the most sensible choice.

6
  • src="/img/icon.gif" is indeed what you want to use, there no reason to write it off.
    – user229044
    Feb 16, 2011 at 13:21
  • 1
    http//localhot:8000/img/icon.gif will cause a 404 error,where the real path should be http//localhot:8000/myapp/img/icon.gif
    – hguser
    Feb 16, 2011 at 13:24
  • So say /myapp/img/icon.gif!
    – Quentin
    Feb 16, 2011 at 13:29
  • Absolute paths are only good if you're not dealing with a dev server and a production server (that have the application located elsewhere from localhost root). Feb 16, 2011 at 14:55
  • This is why you specify the path to the root of the application in the config file for the application. Then spit it out into the environment.
    – Quentin
    Feb 16, 2011 at 14:59
3
  • CSS uses paths relative to the CSS file location.
  • JavaScript uses paths relative to the location of the file containing the script tag.
1

The path is always relative to the path the file referring to it is in. So, let's say your css is in /css/mystyel.css and images are in the path /img, then you refer to that image in css with:

background-image:url(../img/myimg.jpg)

If your js in in /js/myscript.js and you are adressing it from a html-file like /somepath/somehtml.html, then you use:

<script type="text/javascript" src="../js/myscript.js"></script>

If the html was in /somepath/somotherpath/somehtml.html, you would have used src="../../js/myscript.js"

0

Well

body{backgorund-image:url(img/bg.gif);}

is saying look in this directory for a folder img and the file bg.gif

You want to go back one parent directory.

body{backgorund-image:url(../img/bg.gif);}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.