Just to expand niko's answer:
You can reference any image via its URL. No matter where it is, as long as it's accesible you can use it as the src
. Example:
Relative location:
<img src="images/image.png">
The image is sought relative to the document's location. If your document is at http://example.com/site/document.html
, then your images
folder should be on the same directory where your document.html
file is.
Absolute location:
<img src="/site/images/image.png">
<img src="http://example.com/site/images/image.png">
or
<img src="http://another-example.com/images/image.png">
In this case, your image will be sought from the document site's root, so, if your document.html
is at http://example.com/site/document.html
, the root would be at http://example.com/
(or it's respective directory on the server's filesystem, commonly www/
). The first two examples are the same, since both point to the same host, Think of the first /
as an alias for your server's root. In the second case, the image is located in another host, so you'd have to specify the complete URL of the image.
Regarding /
, .
and ..
:
The /
symbol will always return the root of a filesystem or site.
The single point ./
points to the same directory where you are.
And the double point ../
will point to the upper directory, or the one that contains the actual working directory.
So you can build relative routes using them.
Examples given the route http://example.com/dir/one/two/three/
and your calling document being inside three/
:
"./pictures/image.png"
or just
"pictures/image.png"
Will try to find a directory named pictures
inside http://example.com/dir/one/two/three/
.
"../pictures/image.png"
Will try to find a directory named pictures
inside http://example.com/dir/one/two/
.
"/pictures/image.png"
Will try to find a directory named pictures
directly at /
or example.com
(which are the same), on the same level as directory
.