It’s too much easy to display images in HTML, insert the image tag, add source, and alternative image name, see the perfect examples <img src=”imageName.jpg” alt=”alternative image name”>.

in the image tag < > you don’t need to close like another div tag like </>

just simply open the tag < and type image short form img <img

and add the source mean where to add your file for display? source means the path of an image or other words image location.

Image path and image name in the same place

The image always goes inside ” ” double quotation marks symbol

like “profile.jpg”

and this image name always assign with = is equal to ” ” (= ” “)

for the inserting image or displaying images in HTML

img | src | alt

Image | Source | Alternative

img | src | alt

opening tag 
<

tell the html you are inserting or displaying image in HTML img

<img 

and tell html what is the image name and where is located.

for that tell location for source,  short form src  and asign it with = and " "

<img src = ""

Now image name is welcome.jpg 

and It's located in the same folder with index.html or your editing html file.

<img src = "welcome.jpg" 

now tell your html or borwser if image not whoing in HTML file then display the name of image insted of image, that call alternative image name, alt in short.

alternative name alt

<img src = "welcome.jpg" alt "welcomeing image" 

and now close the image tag with >

>

<img src = "welcome.jpg" alt "welcomeing image" >
 

That's it.

It’s now ready to display images in HTML.

Note: if you are inserting images from outside of this folder and inside of the folder in your source then just you need to add a folder path with the image name.

It’s easy to add your folder location with your name.

Just follow the below guide.

HTML file and image in the same folder and same path just add only the image name.

Editing HTML file to the outside of folder to go ../

Editing HTML file to inside folder go folderName/imageName

How To insert image in Html in Real Work

Here is the real-world implementation for how to insert images in HTML, folder structure, file and image displaying.

You will be confident after following this guide.

webdesign
└── newWebsite
│   ├──images
│       ├──profile.jpg
        ├──banner.jpg
│   ├──index.html
│   ├──style.css
│   ├──script.js
│   ├──mypci.jpg
│   
└── NewImage
    ├──userimage.jpg
    ├──newimage.jpg

│loclimage.jpg



First check, where to I inserting the image?

webdesign/newWebsite/index.html

mean index.html

and where is the images?

inside the webdesign folder has one image -> loclimage.jpg

and indede folder, together index.html and images folder with index.html file.
 

and you want to display mypic.jpg

<img src="mypci.jpg" alt="Image"> 

// because it's mypci.jpg and our html file at the same folder.
 

That's fine, it will work.


and you want to display profile.jpg and banner.jpg in the same index.html file from images folder


<img src="images/profile.jpg" alt="Image"> 

// just add foldername images and slash / and image name (images/profile.jpg)


and you want to add out side of folder. index.html file is inside the folder and you want to add image from outside of folder.

let's see.

It's easy.


<img src="../olimage.jpg" alt="Image"> just add dot dot and shash ../ 

../
image name.


add more dot dot slash for more go outside.

like ../../../

let's add the NewImage folder image userimage.jpg

now you are inside the newWebsite folder and index.html


<img src="../NewImage/profile.jpg" alt="Image"> 

first you gone ../ out of folder form index.html
second you gone NewImages folder 
third you gone profile.jpg.

All right. 

Now you are the experts on inserting images in HTML files from anywhere.

Have you got your answer?

Please comment below.

How to Style the Image in HTML

It’s easy to do,

you can add an inline style in the image HTML tag and style it, or provide the class name with it and do the style it.

for the inline <img src=”profile.jpg” alt=”profile Img” width=”100px” height=”100px” style=” border: solid 1px red”>

for the class name <img class=”styleImage” src=”profile.jpg” alt=”profile Img” >

and you can style it.

<style>

.styleImage{

width:100px;

height:100px;

border: 1px solid red;

}

</>

</head>

Have you got any problem inserting images?

See the solution Why Is My Image Not Showing Up In HTML