HTML img tag bruges til at vise billedet på websiden. HTML img tag er et tomt tag, der kun indeholder attributter, afsluttende tags bruges ikke i HTML billedelement.

Lad os se et eksempel på HTML-billede.

sql konkat

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

Produktion:

Attributter af HTML img tag

src og alt er vigtige attributter for HTML img tag. Alle attributter for HTML-billedtag er angivet nedenfor.

1) src

Det er en nødvendig egenskab, der beskriver kilden eller stien til billedet. Den instruerer browseren, hvor den skal lede efter billedet på serveren.

Placeringen af ​​billedet kan være på den samme mappe eller en anden server.

2) alt

Alt-attributten definerer en alternativ tekst til billedet, hvis den ikke kan vises. Værdien af ​​alt-attributten beskriver billedet med ord. Alt-attributten anses for at være god for potentielle SEO.

3) bredde

Det er en valgfri egenskab, som bruges til at angive bredden for at vise billedet. Det anbefales ikke nu. Du bør anvende CSS i stedet for width-attributten.

4) højde

Det h3 billedets højde. HTML-højde-attributten understøtter også iframe-, billed- og objektelementer. Det anbefales ikke nu. Du skal anvende CSS i stedet for højdeattributten.

Brug af højde og bredde attribut med img tag

Du har lært om, hvordan du indsætter et billede på din webside, hvis vi nu vil give noget højde og bredde til at vise billedet i henhold til vores krav, så kan vi indstille det med højde og bredde attributter for billedet.

Eksempel:

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

Produktion:

Bemærk: Prøv altid at indsætte billedet med højde og bredde, ellers kan det flimre, mens det vises på websiden.

Brug af alt-attribut

Vi kan bruge alt attribut med tag. Det vil vise en alternativ tekst i tilfælde af, at billedet ikke kan vises i browseren. Følgende er eksemplet for alt-attribut:

konverter strengdato

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

Produktion:

Hvordan får man et billede fra en anden mappe/mappe?

For at indsætte et billede på din web, skal billedet være til stede i din samme mappe, hvor du har lagt HTML-filen. Men hvis billedet i nogle tilfælde er tilgængeligt i en anden mappe, kan du få adgang til billedet som dette:

I ovenstående erklæring har vi lagt billede i lokal disk E------>images folder ---->img/html-tutorial/39/html-image-2.webp.

Bemærk: Hvis src URL vil være forkert eller stave forkert, vil det ikke vise dit billede på websiden, så prøv at sætte korrekt URL.

Brug tag som et link

Vi kan også linke et billede til en anden side, eller vi kan bruge et billede som et link. For at gøre dette skal du sætte tag inde i tag.

Eksempel:

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

Produktion:

Understøtter browsere

Element	Chrome	IE	Firefox	Opera	Safari
	Ja	Ja	Ja	Ja	Ja