Image tag is used to display images in browser.
Image play a vital role in website ,so we definitely know about this as a developer.
Image can be represented using <img> .
Syntax:
- <img src="some url">, It display the image.
- Without src attribute it won't display image.
Example:
Case-1:
- Open the file explorer in pc or laptop.
- Choose the image what you want .Copy the path of image from properties.For example : C:\Users\avengers\pictures\HTML_galaxy_logo.png (or) copy image link address from browsers.
code:
<!DOCTYPE html>
<html>
<head>
<title>
Image
</title>
</head>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png" width="200" />
<img src="http://pngimg.com/uploads/google/google_PNG19643.png" width="200" />
</body>
</html>
Output:
Case-2:
- If you fail to give src I won't show image.
code:
<img>
<img>
Output:
Output for this case empty because no source of image in above code.
Case-3:
- If there is an error in image address.
- It shows like there is an error image loading.
code:
src="https://upload.wikimedia.org/wikipedia/commo/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png" />
<img src="http://pngimg.com/uploads/google/google_PN9643.png" />
Output:
Image error
For demonstration I missed some letters for showing error image for you.
Case-4:
- If there is an error in image address.
- We can use alt keyword.
- This shows the detail of image what image it is.
code:
<img alt="google" src="https://upload.wikimeda.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png" />
<img src="http://pngimg.com/uploas/google/google_PNG19643.png" alt="image" />
Output:
Image tag with alt
Post a Comment