HTML img-tag wordt gebruikt om de afbeelding op de webpagina weer te geven. HTML img-tag is een lege tag die alleen attributen bevat. Sluittags worden niet gebruikt in het HTML-afbeeldingselement.
Laten we een voorbeeld van een HTML-afbeelding bekijken.
hash kaart
<h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends">Test het nu
Uitgang:
Kenmerken van HTML img-tag
De src en alt zijn belangrijke kenmerken van de HTML img-tag. Alle kenmerken van de HTML-afbeeldingstag worden hieronder gegeven.
1) src
Het is een noodzakelijk attribuut dat de bron of het pad van de afbeelding beschrijft. Het instrueert de browser waar de afbeelding op de server moet worden gezocht.
De locatie van de afbeelding kan zich in dezelfde map of op een andere server bevinden.
2) alles
Het alt-attribuut definieert een alternatieve tekst voor de afbeelding, als deze niet kan worden weergegeven. De waarde van het alt-attribuut beschrijft de afbeelding in woorden. Het alt-attribuut wordt als goed beschouwd voor SEO-perspectief.
3) breedte
Het is een optioneel attribuut dat wordt gebruikt om de breedte voor weergave van de afbeelding op te geven. Het wordt nu niet aanbevolen. U moet CSS toepassen in plaats van het breedte-attribuut.
conversie van datum naar tekenreeks
4) hoogte
Het is de hoogte van het beeld. Het HTML-hoogteattribuut ondersteunt ook iframe-, afbeeldings- en objectelementen. Het wordt nu niet aanbevolen. U moet CSS toepassen in plaats van het height-attribuut.
lijst van staten
Gebruik van hoogte- en breedte-attribuut met img-tag
U hebt geleerd hoe u een afbeelding in uw webpagina kunt invoegen. Als we nu wat hoogte en breedte willen opgeven om de afbeelding weer te geven volgens onze vereisten, dan kunnen we deze instellen met hoogte- en breedte-attributen van de afbeelding.
Voorbeeld:
<img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image">Test het nu
Uitgang:
Let op: Probeer de afbeelding altijd met hoogte en breedte in te voegen, anders kan deze flikkeren tijdens weergave op de webpagina.
Gebruik van alt-attribuut
We kunnen het alt-attribuut gebruiken met label. Er wordt een alternatieve tekst weergegeven als de afbeelding niet in de browser kan worden weergegeven. Hieronder volgt een voorbeeld voor het alt-attribuut:
<img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image">
Uitgang:
nieuwe regel in python
Hoe kan ik een afbeelding uit een andere directory/map halen?
Om een afbeelding in uw web in te voegen, moet die afbeelding aanwezig zijn in dezelfde map waarin u het HTML-bestand heeft geplaatst. Maar als in een bepaald geval de afbeelding beschikbaar is in een andere map, kunt u de afbeelding als volgt openen:
In bovenstaande verklaring hebben we de afbeelding in de lokale schijf E------>map afbeeldingen------>img/html-tutorial/39/html-image-2.webp geplaatst.
Opmerking: als de src-URL onjuist of verkeerd gespeld is, wordt uw afbeelding niet op de webpagina weergegeven, dus probeer de juiste URL in te voeren.
Gebruik ![]()
taggen als link
We kunnen ook een afbeelding aan een andere pagina koppelen of we kunnen een afbeelding als link gebruiken. Om dit te doen, zet label binnen de label.
Voorbeeld:
<img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp">Test het nu
Uitgang:
Ondersteunende browsers
| Element |  Chroom |  D.W.Z |  Firefox |  Opera |  Safari |
| | Ja | Ja | Ja | Ja | Ja |