How to Add Image in HTML From a Folder

1. Use the <img> Tag to Add an Image From a Folder in HTML
2. Use the CSS background-image Property to Add an Image From a Folder in HTML

This article explores different ways to add an image from a folder in HTML.

Use the <img> Tag to Add an Image From a Folder in HTML

If you have an image saved locally in your system, you can easily add it to HTML. You can use the <img> tag and specify the path of the image in the src attribute.

Although the steps are simple, sometimes the image does not show up on the webpage. The problem mostly occurs because the image path is incorrect, and the browser cannot locate the image.

Therefore, you must set the correct image path in the src attribute.

Let’s consider the following structure.

HTML_project
├── image1.jpg
└── index.html

Here, the HTML file and the image are in the same directory.

For example, create the <img> tag and write the path image1.jpg to insert an image. You can use the alt attribute to add an alternative text.

In some cases, the image might not show up. So, it’d make sense to let users know what the image is about.

When the image is displayed, the alternative text is not shown. Note that <img> doesn’t have a closing tag.

Example Code:

<img src="image1.jpg" alt="Mango Tree">

The image and the HTML file are on the same path in the above example. Therefore, we wrote only the filename in the src attribute.

Let’s consider another scenario where an image is kept inside a directory.

HTML_project
├── images
│   └── image1.jpg
└── index.html

For such a structure, we can set the path of the image in two ways.

Example Code:

<img src="images/image1.jpg" alt="Mango Tree">

Here, the given path tells the browser to look for a directory named images in the same directory where index.html is located. Next, the browser locates the images directory and finds the image1.jpg inside it.

Thus, the image gets displayed in the browser.

Example Code:

<img src="./images/image1.jpg" alt="Mango Tree">

Here, the ./ at the beginning of the path indicates the current directory from the location of index.html, which is HTML_project. Then, the images directory is located, and image1.jpg is added to the webpage.

Use the CSS background-image Property to Add an Image From a Folder in HTML

This method explains the other way to add an image in HTML. However, the image file path convention is similar to the first method.

The only difference is we will use the CSS background-image property instead of the <img> tag.

Let’s write code to upload the image using CSS for the following structure.

HTML_project
├── image1.jpg
└── index.html

Example Code:

<div class = "div1" style="background-image: url('image1.jpg'); height: 200px; width: 200px;">

The above code snippet creates a background image having a height and width of 200px.

Similarly, let’s consider the following structure.

HTML_project
├── html
│   └── index.html
└── images
    └── image1.jpg

Example Code:

<div class = "div1" style="background-image: url('../images/image1.jpg'); height: 200px; width: 200px;">

Here, ../ means to move one step back in the directory tree. That means you have moved from the images directory to the HTML_project directory, where you can find the images directory and then the image1.jpg file inside.

Finally, the image is displayed.

This is how you can use the HTML and CSS with the correct image path to add an image from the folder in HTML.