How to Insert an Image from Folder in HTML Last Updated : 23 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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 ContentUsing HTML <img> src AttributeInsert Image from Folder in CSSInsert Image from Folder using HTML <img> src AttributeThe <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"> OutputInsert Image from Folder in CSSInsert 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 Comment More infoAdvertise with us Next Article How to Insert an Image from Folder in HTML V vkash8574 Follow Improve Article Tags : HTML HTML-Questions 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 2 min read 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 1 min read 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"> 1 min read 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 5 min read 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 2 min read Like