attribute instructs the browser where on the server it should look for the
image that’s to be presented to the user. This may be an image in the same
directory, an image somewhere else on the same server, or an image stored
on another server.
The example refers to an image that’s located in the same directory as the web page that’s calling it, but if the image was stored in a directory that was one level higher than the referencing document, the syntax would be as follows:
<img src="../giant-prawn.jpg" alt="The Giant Prawn at Ballina"/>
../ equates to “move up one directory in the
You can also reference an image relative to the web site’s root (that is, any file or folder after the domain name):
<img src="/giant-prawn.jpg" alt="The Giant Prawn at Ballina"/>
This basically means “display the image giant-prawn.jpg that can be found in www.example.com/.” This is a very handy way of referencing the file, as you could move the document that referenced the image to any location on the file system without breaking the link.
If you’re referencing an image that’s held on
another server, you’d express the
src using a
complete URI, as follows:
<img src="http://www.example.com/giant-prawn.jpg" alt="The Giant Prawn at Ballina"/>
attribute for this image shows that the image is located in the same
directory as the web page:
<img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina"/>
This attribute takes as its value
the location of the image relative to the referencing document, relative
to the server root, or as a complete URI containing the
http:// protocol, the server name, and the path to the
document on that server.
It causes no compatibility issues, and has excellent support across all tested browsers.