Including an image in html requires use of <img> tag. To display an image we have to give image path in src attribute image path can be path of image storage in local system or it can be a url.
HTML Image tag Syntax
1 | <img src="path of image"> |
img tag uses following few attributes
- src: This attribute is compulsory it provide path to image(including image name with extension). path may be either url or path of image in directory if image is in same directory where your htlm page is then you have to give image name with extension only.
- alt: It provides alter native text for image. If image is not loaded then browser will display this text message.
- width: We can set the width of image either in pixel value or % wise.
- height: We can set the height of image either in pixel value or % wise.
HTML Imgsrc alt widht and height attributes
1 | <img src="path to image" alt="alternative text" width="width" height="height"> |
HTML Image Example
1 | <img src="https://static.pexels.com/photos/265987/pexels-photo-265987.jpeg"> |
HTML imgsrc url example with alt attribute
1 | <img src="https://static.pexels.com/photos/265987/pexels-photo-265987.jpeg" alt="Image"> |
HTML imgsrc url example with alt width and heigh attribute
1 | <img src="https://static.pexels.com/photos/265987/pexels-photo-265987.jpeg" alt="Image" width="200" height="100"> |
1 | <img src="https://static.pexels.com/photos/265987/pexels-photo-265987.jpeg" alt="Image" width="30%" height="50%"> |
Output:
Here we discussed Image with imgsrc alt width and height attribues.
Q img src not working
A. It may be due to image path is not correct. copy your image path and paste in browser if image opens then ok other wise check your image path again.
Read More
Reference