HTML img таг се използва за показване на изображение на уеб страницата. HTML img тагът е празен таг, който съдържа само атрибути, затварящите тагове не се използват в HTML елемента на изображението.

Нека да видим пример за HTML изображение.

 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 

Изход:

Атрибути на HTML img таг

Src и alt са важни атрибути на HTML img тага. Всички атрибути на HTML тага за изображение са дадени по-долу.

фабричен дизайн модел

1) src

Това е необходим атрибут, който описва източника или пътя на изображението. Той инструктира браузъра къде да търси изображението на сървъра.

Местоположението на изображението може да е в същата директория или на друг сървър.

2) всичко

Атрибутът alt дефинира алтернативен текст за изображението, ако то не може да бъде показано. Стойността на атрибута alt описва изображението с думи. Атрибутът alt се счита за добър за бъдещи SEO.

3) ширина

Това е незадължителен атрибут, който се използва за определяне на ширината за показване на изображението. Сега не се препоръчва. Трябва да приложите CSS вместо атрибута width.

4) височина

Това е h3 височината на изображението. Атрибутът за височина на HTML също поддържа iframe, елементи на изображение и обект. Сега не се препоръчва. Трябва да приложите CSS вместо атрибута за височина.

Използване на атрибут за височина и ширина с етикет img

Научихте как да вмъкнете изображение във вашата уеб страница, сега, ако искаме да дадем някаква височина и ширина за показване на изображението според нашите изисквания, тогава можем да го зададем с атрибути за височина и ширина на изображението.

Пример:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Изход:

Забележка: Винаги се опитвайте да вмъкнете изображението с височина и ширина, в противен случай то може да трепти, докато се показва на уеб страницата.

Използване на атрибут alt

Можем да използваме атрибута alt с етикет. Той ще покаже алтернативен текст в случай, че изображението не може да се покаже в браузъра. Следва пример за атрибут alt:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Изход:

Как да получа изображение от друга директория/папка?

За да вмъкнете изображение във вашата мрежа, това изображение трябва да присъства в същата папка, в която сте поставили HTML файла. Но ако в някакъв случай изображението е налично в друга директория, можете да получите достъп до изображението по следния начин:

В горното изявление сме поставили изображение в локалния диск E------>папка с изображения------>img/html-tutorial/39/html-image-2.webp.

Забележка: Ако src URL адресът е неправилен или правописен, той няма да показва вашето изображение на уеб страницата, така че опитайте да поставите правилния URL адрес.

Използвайте етикет като връзка

Можем също да свържем изображение с друга страница или можем да използваме изображение като връзка. За да направите това, поставете етикет вътре в етикет.

превъртането на мишката не работи

Пример:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 

Изход:

Поддържащи браузъри

елемент	Chrome	IE	Firefox	Опера	Safari
	да	да	да	да	да