How to Insert Image in HTML from Folder?

This article provides a complete overview on how to insert image in HTML code form folder. Images into a webpage is a crucial aspect of web design that enhances its visual appeal and user engagement. HTML provides various methods to insert images from a folder into your web pages.

Method 1: Using the <img> Tag

The <img> tag is the basic method to insert an image in HTML. The src attribute specifies the path to the image file.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Insert an Image in HTML from a Folder
    </title>
</head>

<body>
    <h3>Insert an Image in HTML from a Folder</h3>

    <img src="Geeks/HTML-tutorial.jpg" alt="HTML Tutorial"
        width="350px" height="230px">
</body>

</html>

Output:

image-from-folder-1

Explanation:

<img src="Geeks/photo.jpg">: This line inserts an image into the webpage. The src attribute specifies the path to the image file, which is Geeks/photo.jpg in this case.
The alt attribute provides alternative text for the image, which is displayed if the image cannot be loaded.
The width and height attribute set the width and height of the image.

Method 2: Using CSS Background Image

You can also use CSS to set an image as the background of an HTML element.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Insert an Image in HTML from a Folder
    </title>

    <style>
        .background-image {
            width: 350px;
            height: 230px;
            background-image: url('Geeks/HTML-tutorial.jpg');
            background-size: cover;
        }
    </style>
</head>

<body>
    <h3>Insert an Image in HTML from a Folder</h3>

    <div class="background-image"></div>
</body>

</html>

Output:

image-from-folder-1

Explanation:

.background-image { ... } - This CSS rule applies styles to elements with the class background-image.
background-image: url('Geeks/photo.jpg') - Sets the background image of the element to photo.jpg from the images folder.
background-size: cover - sures that the background image covers the entire element, maintaining its aspect ratio.

Article Tags :

HTML

Web Technologies

HTML-Questions