How Do You Insert an Image From a Folder in HTML?

To insert an image from a folder in HTML, you use the <img> tag with the src attribute set to the path of the image file, including the folder name.

Using the HTML <img> Tag

The fundamental way to display images on a webpage is by employing the HTML <img> tag. As highlighted by sources, this tag is specifically designed for embedding images.

The src Attribute: Your Image's Address

The most crucial attribute for the <img> tag is src. This attribute specifies the source, or the path, to the image file you want to display. When your image is located within a specific folder relative to your HTML file, you must include the folder name as part of the path in the src attribute.

For example, if your HTML file and an images folder are in the same directory, and your image photo.jpg is inside the images folder, the src path would be images/photo.jpg.

<img src="images/photo.jpg" alt="A descriptive image of a photo">

Understanding Image Paths

Specifying the correct path in the src attribute is key. Paths can be either relative or absolute.

• Relative Paths: These paths specify the location of the image file relative to the location of the HTML file.
  • folder_name/image.jpg: Image is in a subfolder named folder_name within the current directory.
  • ../image.jpg: Image is in the parent folder of the current directory.
  • ../another_folder/image.jpg: Image is in a folder named another_folder which is located one level up from the current directory.
• Absolute Paths: These paths provide the full URL to the image on the web (e.g., https://www.example.com/images/logo.png) or the full file path on a computer's file system (less common for web images accessible online).

When inserting an image from a local folder relative to your project structure, you will almost always use a relative path.

Essential <img> Attributes

Beyond the src attribute, several other attributes are vital for accessibility, responsiveness, and control over how the image is displayed:

Attribute	Description	Example Usage
src	Specifies the path to the image file. (Required)	src="path/to/image.jpg"
alt	Provides alternative text for the image. (Highly Recommended)	alt="Description of the image"
width	Sets the width of the image in pixels or percentage.	width="300" or width="50%"
height	Sets the height of the image in pixels or percentage.	height="200" or height="auto"

The alt attribute is particularly important for accessibility, providing a text description for screen readers or if the image fails to load. The reference also mentions alt, width, and height as ways to customize the display.

Practical Examples

Here are a few examples demonstrating how to insert images from different folder locations:

• Image in a subfolder:

  <img src="assets/images/logo.png" alt="Company Logo" width="150">

• Image in the parent folder:

  <img src="../backgrounds/pattern.gif" alt="Background pattern">

• Image in a folder two levels up:

  <img src="../../shared_assets/icons/info.svg" alt="Information icon">

By correctly specifying the folder name and the image file name in the src attribute, you can effectively insert images from various locations within your project's directory structure onto your HTML page.