HTML img tag slouží k zobrazení obrázku na webové stránce. HTML img tag je prázdný tag, který obsahuje pouze atributy, uzavírací tagy se nepoužívají v HTML image elementu.

Podívejme se na příklad HTML obrázku.

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

Výstup:

řetězec v int

Atributy HTML značky img

Src a alt jsou důležité atributy HTML img tagu. Všechny atributy značky HTML obrázku jsou uvedeny níže.

1) src

Je to nezbytný atribut, který popisuje zdroj nebo cestu obrázku. Instruuje prohlížeč, kde má na serveru obrázek hledat.

Umístění obrázku může být ve stejném adresáři nebo na jiném serveru.

co jsou selektory v css

2) všechno

Atribut alt definuje alternativní text obrázku, pokud jej nelze zobrazit. Hodnota atributu alt popisuje obrázek slovy. Atribut alt je považován za dobrý pro potenciální SEO.

3) šířka

Je to volitelný atribut, který se používá k určení šířky pro zobrazení obrázku. Nyní se to nedoporučuje. Místo atributu width byste měli použít CSS.

4) výška

Je to h3 výška obrázku. Atribut výška HTML také podporuje prvky iframe, image a object. Nyní se to nedoporučuje. Místo atributu height byste měli použít CSS.

Použití atributů výška a šířka s tagem img

Naučili jste se, jak vložit obrázek na vaši webovou stránku, nyní, pokud chceme dát nějakou výšku a šířku pro zobrazení obrázku podle našeho požadavku, pak to můžeme nastavit pomocí atributů výška a šířka obrázku.

dekódování javascriptu base64

Příklad:

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

Výstup:

Poznámka: Vždy se snažte vložit obrázek s výškou a šířkou, jinak může při zobrazení na webové stránce blikat.

Použití atributu alt

Můžeme použít atribut alt s štítek. V případě, že obrázek nelze zobrazit v prohlížeči, zobrazí alternativní text. Následuje příklad atributu alt:

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

Výstup:

css podtržený text

Jak získat obrázek z jiného adresáře/složky?

Chcete-li vložit obrázek na web, musí být tento obrázek přítomen ve stejné složce, kam jste umístili soubor HTML. Ale pokud je v některých případech obrázek dostupný v nějakém jiném adresáři, můžete k obrázku přistupovat takto:

Ve výše uvedeném prohlášení jsme umístili obrázek na místní disk E------>složka obrázky------>img/html-tutorial/39/html-image-2.webp.

Poznámka: Pokud bude src URL nesprávná nebo překlep, nezobrazí se váš obrázek na webové stránce, takže zkuste zadat správnou URL.

Použití označit jako odkaz

Můžeme také propojit obrázek s jinou stránkou nebo můžeme použít obrázek jako odkaz. Chcete-li to provést, položte tag uvnitř štítek.

Příklad:

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

Výstup:

Podporované prohlížeče

Živel	Chrome	TJ	Firefox	Opera	Safari
	Ano	Ano	Ano	Ano	Ano