HTML <img> src Attribute

The HTML <img> tag

Definition and Usage

Required src The attribute specifies the URL of the image.

There are two methods to specify the image URL in src Specify the URL in the attribute:

1. Absolute URL - Link to external images hosted on other websites. For example:

src="https://www.codew3c.com/images/img_girl.jpg"

Note:External images may be protected by copyright. If you do not obtain permission to use it, it may violate copyright law. In addition, you cannot control external images; they may be removed or changed suddenly.

2. Relative URL - Link to images hosted within the website.

In this case, the URL does not include the domain name. If the URL does not start with a slash, it will be relative to the current page. For example:

src="img_girl.jpg".

If the URL starts with a slash, it will be relative to the domain. For example:

src="/images/img_girl.jpg".

Tip:It may be better to use relative URLs. If you change the domain name, it will not cause a broken link.

Note:If the browser cannot find the image, it will display a broken link icon and alt text.

Tip:To organize the storage of documents, creators usually store image files in a separate folder and often name these directories "pics" or "images" and so on. In the CodeW3C.com online tutorial, our engineers store most of the commonly used images in a folder named "i", where "i" is an abbreviation for "images". The benefit of this is to simplify the path to the maximum extent.

Example

In the following example, we insert a tulip photo taken by an engineer at CodeW3C.com at the Shanghai Flower Port into the page. The name of the photo file is "eg_tulip.jpg", and it is stored in the "i" folder on the server. This is the source code:

<img src="/i/eg_tulip.jpg" />

The effect of the above code is:


Try It Yourself

Tip:You can try it in our online test toolTry It YourselfIf you change the filename in the example to "eg_chinarose.jpg", you will see a photo of a Chinese rose. It looks like this:

Source Code:

<img src="/i/eg_chinarose.jpg" />

The effect of the above code is:

Syntax

<img src="URL">

Attribute Value

Value Description
URL

Specifies the URL of the image.

Possible Values:

  • Absolute URL - Points to another website (e.g., src="http://www.example.com/image.gif")
  • Relative URL - Points to a file within a website (e.g., src="image.gif")

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

The HTML <img> tag