How to Add Image in HTML From a Folder?

In HTML, images play a vital role as it makes a webpage more expressive and understandable. Images are a visual treat to the eyes of the user as it attracts the user and keeps him engaged in surfing the web page more. You can add the image from your machine to an HTML document. In this post, we will guide you, how you can add an image from a folder to an HTML document.

How do we Add an Image From a Folder in HTML?

In HTML, the purpose of <img> tag is to add an image in a webpage. The src attribute of this tag specifies the path of the image. The image path has two cases. In case of absolute path, you need to give the complete path where the relative path represents the location of the image with respect to the HTML file where it is being embedded.

The syntax of the <img> tag is described below:

Syntax

The primary component is the src attribute where the path of the file will be provided. As discussed earlier, the path could be relative or absolute.

Let’s add an image to HTML document from the folder:

Code

In this code, we use <img> tag to insert an image in the HTML page and use src attribute to specify the path of the image.

Output

The output shows that the image is successfully inserted into the HTML page from a folder.

That’s it! You have learned to add an image from a folder to the HTML document.

Conclusion

In HTML, the <img> tag is used to add an image from the folder to the HTML document. The image path is specified by the src attribute of <img> tag. To specify the path, firstly write the folder name, then a backslash “/” and lastly, write the image name with its extension. In this article, we have provided the information regarding the process of adding an image in HTML from a folder.