html image src confusion

Question

If I put in the src attribute ./images/nothing.gif what does that translate to?

I have a javascript file that makes src attribute of some html element to 'nothing.gif'

but on the page nothing.gif shows as 'file not found' symbol.

Currently nothing.gif resides at the following place in my ftp server:

/www/foldername/wp-content/themes/themeg/images/nothing.gif

the javascript resides at:

/www/darksnippets/wp-content/themes/themeg/javascript.js

since this is wordpress there is no actual 'html page' the content is stored in the DB. so If I used ../ where should I place nothing.gif?

Edit:

here is the link to the page: http://www.darksnippets.com/?page%5Fid=56

nothing.gif can be found here: http://www.darksnippets.com/wp-content/uploads/nothing.gif

in the bottom right you will see broken image symbol (this shows up in IE of Chrome. does not show in FF)

Answer 1

One of the ideas is to use a full path to the image file

e.g. http://www.yourdomain.com/images/nothing.gif

Answer 2

Not having worked with wp very much, I can't give a specific answer, but a general solution would to be to use the format "http://www.sitename.com/folder/nothing.gif" Where, of course, sitename.com/folder gets replaced with your domain name and the folder on your site.

Answer 3

The relative path ./images/nothing.gif is interpreted by the browser, not the server. So it will look at the url from the browser's perspective to resolve the path. What is the url that the browser sees?

Update:

I see you've provided URLs. Change your relative path to:

./wp-content/uploads/nothing.gif

But a better solution would be to use a root relative path. i.e. one that starts with a /

Answer 4

If you're writing a Wordpress template in PHP, you can access the full path to your template directory with:

bloginfo('template_directory')

Alternatively, if you can set the images as background images via CSS (instead of using src), relative image paths defined in CSS will be relative to the CSS path:

.nothing { background: url(images/nothing.gif); }

Answer 5

If the HTML page is http://www.darksnippets.com/?page%5Fid=56 then nothing.gif points to http://www.darksnippets.com/nothing.gif. The location of the Javascript is not relevant. So you should just need "wp-content/uploads/nothing.gif".

Answer 6

As I thought, in IE and Firefox the browser is looking for http://www.darksnippets.com/images/nothing.gif. The relative URL is relative to www.darksnippets.com (the url of the page), not to the javascript's location.

Answer 7

Ates Goral's answer is correct. I'll expand to address other questions you raised.

In relative paths, . (single dot) refers to the current path. This will generally be the path of the page loaded (and resolved according to the rules of your web server), unless your page uses a <base href="..."> which is different from your current path. This is because every page loaded has a base path, which defaults to... you guessed it, . (single dot). Likewise, .. (two dots) refers to the parent directory of the current path (also resolved according to rules on your web server).