Description

The src 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"/>

Here, ../ equates to “move up one directory in the hierarchy.”

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"/> 

Value

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.

Compatibility

It causes no compatibility issues, and has excellent support across all tested browsers.