How to make an HTML link to open a folder ?

How to Insert an Image from Folder in HTML

Last Updated : 23 Oct, 2024

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

Table of Content

Using HTML <img> src Attribute
Insert Image from Folder in CSS

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.

HTML

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

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

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.

HTML

<!DOCTYPE html>
<html>

<head>
    <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

How to make an HTML link to open a folder ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to insert Background Image in HTML From Local Folder ?

Adding a background image to your HTML page can enhance its visual appeal and make it more engaging for users. When the image is stored in a local folder, you can easily reference it in your HTML file using relative or absolute paths. Table of Content Using Inline CSSUsing Internal CSSUsing Inline C

How to Insert an Image in HTML?

To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method

How To Change Image Size In HTML?

To change the size of an image in HTML, you can use width and height attribute within <img> tag. Alternatively, we can use CSS properties to set or change the image size. Change image size feature is useful while developing a responsive web page.Table of ContentUsing HTML width and height Attr

How to make an HTML link to open a folder ?

To create a link to a file or folder, you need toÂ use an <a href > tag. HTML can be used to open a folder from our local storage. To open a folder from our local storage, use the 'href' attribute of HTML. In the href attribute, we specify the path of our folder. Syntax: <a href="Path">

How to Arrange Images and Text in HTML?

In HTML, arranging images and text is essential for creating visually appealing and readable web pages. We can position images in various ways to achieve the desired layout, including the inline with text, above, below, or beside it. Understanding how to align and arrange these elements helps to enh

How to Resize an Image in HTML?

Images are a vital part of any webpage, enhancing the visual appeal and improving user engagement. However, displaying images at the correct size is essential for a professional look and optimal page performance. Resizing an image in HTML ensures that it fits within your webpage's design while maint

How to Add Image inside Table Cell in HTML ?

Adding images inside HTML table cells can enhance the visual appeal of your tables by up to 60%, making your content more engaging and easier to understand. This approach allows you to effectively present visuals alongside text for better communication and user experience.Image inside Table CellThes

How to make an image draggable in HTML?

Drag and drop is a very common and widely used feature in a modern-day website. It simply means to drag an image with the cursor and drop it to any other place. In this article, we are going to learn how to make an image draggable using HTML 5.Making any HTML5 elements including images draggable is

How to Add Image in HTML Table ?

Adding images to an HTML table can enhance the visual appeal and functionality of your webpage. Whether it is for displaying product images in an e-commerce website or adding profile pictures in a user list, images in tables are a common requirement. In this article, we will explore two methods to a

How to render HTML to an image ?

Converting HTML code into an image can be achieved through various methods, such as using the html2canvas JavaScript library or leveraging CSS. This capability is particularly useful for users who wish to share a visual representation of their code without sharing the actual code. This guide will de