How to Insert an Image from Folder in HTML

The <img> src attribute is used to insert an image from folder in HTML. The src attribute accepts absolute and relative file path.

Insert Image from Folder using HTML <img> src Attribute

The <img> tag is used to insert an image in HTML. The src attribute specifies the path to the image file, and other attributes like alt, width, and height can be used to customize the display. The folder image specifies with the folder name with image name. For example - "./images/logo/logo.png".

Syntax

<img src="folder_path/image.jpg" alt="description" width="value" height="value">

Example: Inserting an image form folder in HTML.

Output

👁 image-from-folder-1

Insert Image from Folder in CSS

Insert an image from folder can also be done with CSS. CSS set an image as the background of HTML element. It is useful for setting images as backgrounds for various sections.

Syntax

.element {
 background-image: url('path/to/image.jpg');
 background-size: cover;
}

Example: Inserting an Image from folder using CSS.

Output

👁 image-from-folder-1