HTML <img> tag

Definitie en gebruik

<img> De tag wordt gebruikt om een afbeelding in een HTML-pagina in te voegen.

Technisch gezien wordt het beeld niet daadwerkelijk in de pagina ingevoegd, maar wordt het beeld gelinkt aan de pagina.<img> De tag maakt een container aan voor het verwijzen naar het beeld.

<img> De tag heeft twee vereiste eigenschappen:

  • src - Stel het pad van het beeld in
  • alt - Als het beeld om een of andere reden niet kan worden weergegeven, specificeer dan de alternatieve tekst van het beeld

Opmerking:Bovendien moet u altijd de breedte en hoogte van het beeld specificeren. Als de breedte en hoogte niet worden gespecificeerd, kan de pagina flitsen bij het laden van het beeld.

Tip:Om een afbeelding te koppelen aan een ander document, hoeft u alleen maar de <img> Markering genest <a> Binnen de tag (zie het voorbeeld hieronder).

Zie ook:

HTML Handleiding:HTML image

HTML DOM Referentie Handleiding:Image Object

CSS Handleiding:Stel het stijl van het beeld in

Meer lezen:Hoe je een afbeelding correct kunt gebruiken

Voorbeeld

Voorbeeld 1

In het volgende voorbeeld voegen we een tulpenfoto toe die door een ingenieur van CodeW3C.com in het Shanghai Flower Port is genomen:

<img src="tulip.jpg" alt="Shanghai Flower Port - Tulips" />

Try it yourself

Shanghai Flower Port - Tulip

Voorbeeld 2

Een ander voorbeeld van hoe je een afbeelding kunt invoegen:

<img src="dancer.png" alt="Dancer" width="500" height="749">

Try it yourself

Tip:Meer voorbeelden worden aangeboden aan de onderkant van de pagina.

Eigenschap

Eigenschap Waarde Beschrijving
alt Tekst Stel de alternatieve tekst van het beeld in.
crossorigin
  • anonymous
  • use-credentials
 Sta toe om afbeeldingen van derde partijen te gebruiken die toegang hebben tot cross-origin, samen met het canvas.
height Pixel Stel de hoogte van het beeld in.
ismap ismap Definieer het beeld als een server-side beeldkaart.
loading
  • eager
  • lazy
 Specificeer of de browser de afbeelding onmiddellijk moet laden of de laadvertraging moet uitstellen tot bepaalde voorwaarden zijn vervuld.
longdesc URL Stel de URL in die verwijst naar de gedetailleerde beschrijving van het beeld.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Stel de referentiemachtiging in die moet worden gebruikt bij het ophalen van het beeld.
sizes Afmetingen Stel de afmetingen van de afbeelding in voor verschillende pagina-indelingen.
src URL Stel het pad van het beeld in.
srcset URL-list Stelt een lijst van afbeeldingsbestanden in voor verschillende situaties.
usemap #mapname Definieer de afbeelding als een client-side image map.
width Pixel Stelt de breedte van de afbeelding in.

Globale attributen

<img> De tag ondersteunt ook Globale attributen in HTML。

evenement-attributen

<img> De tag ondersteunt ook Evenement-attributen in HTML。

Meer voorbeelden

Voorbeeld 3

Aligneer afbeeldingen (gebruik CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Try it yourself

Voorbeeld 4

Voeg een rand toe aan de afbeelding (gebruik CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Try it yourself

Voorbeeld 5

Voeg links- en rechtermarges toe aan de afbeelding (gebruik CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Try it yourself

Voorbeeld 6

Voeg boven- en ondermarges toe aan de afbeelding (gebruik CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Try it yourself

Voorbeeld 7

Hoe een afbeelding invoegen vanuit een andere map of een andere website:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Boom" width="150" height="161">

Try it yourself

Voorbeeld 8

Hoe een hyperlink aan een afbeelding toe te voegen:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Try it yourself

Voorbeeld 9

Hoe een afbeelding te maken met klikbare gebieden in een afbeeldingskaart. Elke gebied is een hyperlink:

<img src="life.png" alt="Leven" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Koffie" href="coffee.html">
</map>

Try it yourself

Uitgebreide lezing - Hoe beelden correct te gebruiken

Een van de meest opvallende kenmerken van HTML en XHTML is dat beelden kunnen worden opgenomen in de tekst van het document, zowel als een inbouwend object (inline afbeelding) als een afzonderlijk document dat via een hyperlink kan worden gedownload, of als achtergrond van het document.

Beelden op een redelijke manier in de inhoud van het document opnemen (statische of animatie-gebruikte icons, foto's, uitleg, schilderijen, enz.), maakt het document levendiger en aantrekkelijker, en ziet er professioneler en informatiever uit, en is gemakkelijk te navigeren. Het is ook mogelijk om een afbeelding specifiek te maken tot een visuele gids voor een hyperlinks.

Echter, als beelden overmatig worden gebruikt, wordt het document fragmentarisch en onleesbaar, en verhoogt het de wachttijd van gebruikers bij het downloaden en bekijken van de pagina.

Lees het volgende artikel om te leren over de twee belangrijkste beeldformaten op het web: GIF en JPEG, en hoe je beelden correct gebruikt:

Standaard CSS-instellingen

De meeste browsers zullen de volgende standaardwaarden weergeven <img> Element:

img {
  display: inline-block;
}

Try it yourself

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support