Relative Paths - <img> tags

The above will break if you move your Drupal installation up or down in the directory hierachy! Fixing hard coded urls isn't too much fun over hundreds of pages...!

Basically you should be adding pics to your posts using the image module, I think. This will look after your paths for you. I reckon you should only be using paths manually if you're editing CSS. This can easily be maintained using relative urls, as the relation between the template files and the images within the theme directory will not change.

What are relative URLs?
Put simply, it's an URL which needs some processing before it is valid. It is a local URL, from which certain information is left out. Often this means some directory names have been left off, or the special sequence ../ is being used.

The "relative" comes from the fact that the URL is only valid relative to the URL of the current resource.

Resolving relative URLs
As said, a relative URL needs the URL of the current resource to be interpreted correctly. With some simple manipulations, the relative URL is transformed into an absolute URL, which is then fetched as usual.

A relative URL is always a local URL. The first part is therefore always the same as that of the current URL. The relative URL is then turned into an absolute local URL with the following simple steps:

Omit the filename of the current absolute local URL, if it's not a directory URL.
For every ../ at the beginning of the relative URL, chop off one directory name from the current directory URL.
Append the local URL to the current one.
A few simple examples
In these examples, we assume that the full URL of the current document is

http://www.foo.com/users/galactus/index.html

Relative URL: myessay.html
The full URL for this relative URL is http://www.foo.com/users/galactus/myessay.html

Relative URL: pics/background.gif
The full URL for this relative URL is http://www.foo.com/users/galactus/pics/background.gif

Relative URL: ../cgi-bin/myscript.pl.
The full URL for this relative URL is http://www.foo.com/users/cgi-bin/myscript.pl

Note that it is not necessarily true that the ../ bit in a relative URL refers to going "up" one directory on the server. It may often be the case, since that's the most simple and common way to do it, but the ../ applies to the URL, not the actual directory tree on the server.

As you can see in the last example, it is quite possible that ../ ends you in a totally different directory on the server

How does a link starting with a dot function exactly ?

In most cases, figuring the absolute URL from a relative URL is just a matter of concatenating the base URL and the relative URL, as in the example above. There are, however, a few special cases:

A directory called .. (two periods) in a relative URL indicates the parent directory, essentially stripping off everything up to the previous slash in the the Base URI. Note that this only has meaning inside the pathname, so you cannot use this notation to go up higher than the root directory.

A directory called . (one period) refers to the current directory.

A relative URL that begins with / (a slash) always replaces the entire pathname of the base URL.

A relative URL that begins with // (two slashes) always replaces everything from the hostname onwards.

After implementing Clean URLs, I had this exact problem.

I like to use a subdirectory for all my css files and images and whatever else so as soon as I uncommented RewriteBase, only the front page could reference the needed files correctly and any other pages within the sites had their relative paths all aldksjf;lasdkjf;...

So anyways, previously I used <? php print $directory ?> before any paths to any of my theme files.

Now I've added <? php print $base_path ?> in front of that token.

For example:

  <link rel="stylesheet" href="<?php print $base_path ?><?php print $directory ?>/css/global.css" />

or

  <img id="logo" src="<?php print $base_path ?><?php print $directory ?>/images/site_logo.png" alt="Site Logo" />

I'm not 100% satisfied with this method but it's fine and requires nothing else more than just the uncommenting of RewriteBase as far as Clean URLs are concerned.

I DID NOT want to do anything with ./, ../, etc. That's not right...especially the deeper into your site you'd go.

This reply is totally like 2 years later but hopefully it is of some help to someone.

Convert full Image URLs to relative URLs.

/**
 * Implements hook_file_url_alter().
 */
function mymodule_file_url_alter(&$uri) {
    global $base_path;

    $scheme = file_uri_scheme($uri);

    // If the file uses the public scheme,
    if ($scheme == 'public') {
        $wrapper = file_stream_wrapper_get_instance_by_scheme($scheme);
        // Get the file's path
        $path = $wrapper->getDirectoryPath() . '/' . file_uri_target($uri);
        // Set the URL to the (relative) base path plus the file's path
        $uri = $base_path . $path;
    }
}