Kundan.dev
Published on
•

Html

How to add Image in HTML from a Folder - [with code]

Authors

In web development, images play a very important role in capturing the attention of users.

Images can completely change a plain webpage into a visual masterpiece. It enhances the user experience and leaves a long-lasting impression on the visitors' minds.

In this comprehensive guide, we will learn how we can add images from your local folder to your HTML files.

Add image in HTML from a Folder

Basic <img /> tag

In HTML, images are added using a self-closing <img />. It supports attributes like src and alt.

Here, src represents the source link of the image. It means where the image is currently hosted.

<img src="source-link" alt="alternative text" />
  1. If images are stored locally where our HTML file and other files are kept. In this case, we add images like this:
<img src="./dog.png" alt="image of dog" />
  1. If images are hosted outside and need to be fetched into HTML using <img /> tag, then, we add external images in HTML like this:
<img src="https://images.unsplash.com/photo-1575936123452-b67c3203c357" alt="image of a lady" />

<img /> tag also supports attributes to customize the image dimensions like height and width.

<img src="./congress.png" alt="US Congress" height="200px" width="500px" />

Add Images from a Folder

As a project grows, it becomes very difficult to manage and use images in HTML code. Also, we use a directory or a folder to arrange images in a project.

A question arises: how to add an image stored in a folder or a directory?

To add images stored in a folder, first, we need to check the location of the image including the folder name.

  1. If the HTML file and the images folder are on the same level and the folder contains the image estanborai.png, like this:
Project folder
|
├── index.html
├── style.css
|
└── images
      ├── estanborai.png

then, add images in HTML using:

<img src="./images/estanborai.png" alt="Estan Borai" />

Here, HTML file index.html and images folder are in same level/directory.

  1. If HTML file and image folder are not in the same level and the file structure looks like this:
Project folder
|
├── code
|     ├── index.html
|     ├── style.css
|
└── images
      ├── estanborai.png

then, add images using:

<img src="../images/estanborai.png" alt="Estan Borai" />

Noticed use of ../ instead of ./?

Here, HTML file index.html is in the code folder.

../ represents that folder images is one directory back instead of folder code. In simple, index.html has to first go a step backwards looking for images.

Final note:

In this blog, we have learnt how to add images from a folder inside HTML. We also covered images from local storage or fetched from external hosts.

So, use these codes by copying and pasting them into your project.

And lastly,

Happy coding!

Share: