Logo - ProgrammingHead

How to insert an image in HTML from a folder

To add an image in HTML from a folder, you need to reference the folder name before the image fileName and the extension.
For example: folderName/imageName.jpg

How to insert an image in HTML from a folder [With Examples]

index.html

<img src="images/picture.jpg"/>

This will only work if the images folder is present at the same location as your HTML file.
If the folder is present somewhere else, then you should move it to HTML file's location or use the full image path instead.

Navigating to File/Folder Path

For navigating, you should use these path symbols like: / ./ ../.
/ For Navigating to ROOT directory.
./ Current working directory and
../ Refers to the parent directory of the current working directory.

index.html [Folder Present at the Root Location]

<img src="/images/picture.jpg"/>

index.html [Folder Present at Current Working Directory]

<img src="./images/picture.jpg"/>

index.html [Folder Present at Parent directory]

<img src="../images/picture.jpg"/>

If your Image folder is not present at the same directory or its present somewhere else, then you should use the Full Path.

To get the full path of any File,
Right Click on your image file,
Properties[info for MAC],
and Copy the Full from Security Tab.

index.html [Full Image Path]

<img src="C:user/ph/OneDrive/Downloads/images/picture.jpg"/>

You can also use image URLs as image source in HTML.
Just find any image over google, and copy the image path.
Please make sure its an image URL, not the page URL. Image URL usually ends with .png/.jpg/.gif/.wepg extensions

index.html [From URL]

<img src="https://www.programminghead.com/images/temp.png"/>

Related Topics: How to insert an image in HTML from a folder [With Examples]

Click on Titles below to reveal the Data

How to add Multiple images into an HTML

If you want to Insert Images (Multiple Images) into an HTML document using Notepad, Then you have to use Multiple Image tags with multiple Images.
Just keep in mind, HTML Image tags don't have any closing tags. So you don't have to close it Just add multiple images as shown in the Example below:

index.html

<html>  
  <body>

   <img src="myImage1.jpg"/>
   <img src="myImage2.jpg"/>
   <img src="myImage3.jpg"/>
   <img src="myImage4.jpg"/>     

  </body>
</html>

Change Height and Width of an Image

Image tag's Height and Width attribute allows us to set a custom Height and Width to our HTML Image.
We can assign our HTML Image Height/Width in Pixels (px) or Percentage (%) or relative em/rm. It totally depends on you.

index.html

<img src="myImage.jpg" width="100px" height="100px"/>

How to insert a background image into an HTML document using Notepad

To insert a background image in HTML using notepad, we have to use CSS's background Property. Which allows us to set background images into HTML Elements.
Inside CSS's background url Property where we have to give our image file name followed by the File extension.

index.html [using Inline CSS]

<body style="background-image: url('myImg.jpg');">

style.css [using external CSS]

body{
	background: url("myImage.jpg");
}