How to Insert Image in HTML from Folder?
Last Updated :
26 Mar, 2024
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:
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:
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.
Share your thoughts in the comments
Please Login to comment...