HTML <img> tag
Definition och användning
<img>
Etiketten används för att inbädda bilder i HTML-sidor.
Tekniskt sett läggs bilden inte in i webbsidan, utan bildlänken läggs till i webbsidan.<img>
Etiketten skapar en behållare för att hänvisa till bilden.
<img>
Etiketten har två nödvändiga egenskaper:
- src - Specificera bildens sökväg
- alt - Om bilden inte kan visas på grund av någon anledning, specificera bildens alternativtext
Observera:Dessutom måste du alltid specificera bildens bredd och höjd. Om bredd och höjd inte specificeras kan sidan blänka när bilden laddas.
Tips:För att länka en bild till en annan dokument, behöver du bara lägga till <img>
Etikett inbäddad i <a> Inuti etiketten (se exempel nedan).
Se också:
HTML-lärbok:HTML bild
HTML DOM-referenshandbok:Image-objekt
CSS-lärbok:Ställ in bildens stil
Läs mer:Hur man använder bild korrekt
Exempel
Exempel 1
I följande exempel lägger vi till en tulippbild som en ingenjör från CodeW3C.com tog på Shanghai Flower Port:
<img src="tulip.jpg" alt="Shanghai Flower Port - Tulip" />

Exempel 2
En annan exempel på hur man lägger till en bild:
<img src="dancer.png" alt="Dancer" width="500" height="749">
Tips:Mer exempel på sidan botten.
Egenskap
Egenskap | Värde | Beskrivning |
---|---|---|
alt | Text | Specificerar bildens alternativtext. |
crossorigin |
|
Tillåter användning av bilder från tredjepartswebbplatser som tillåter korsdomänåtkomst tillsammans med canvas. |
height | Pixels | Specificerar bildens höjd. |
ismap | ismap | Definierar bilden som en serverbaserad bildkarta. |
loading |
|
Bestämmer om webbläsaren ska ladda bilden omedelbart eller fördröja laddningen tills vissa villkor är uppfyllda. |
longdesc | URL | Specificerar URL som pekar på en detaljerad beskrivning av bilden. |
referrerpolicy |
|
Specificerar referensinformation som används när bilden hämtas. |
sizes | Storlek | Specificerar bildens storlek för olika sidolayout. |
src | URL | Specificerar bildens sökväg. |
srcset | URL-list | Bestäm listan över bildfiler som används i olika situationer. |
usemap | #mapname | Definiera bilden som en klientbaserad bildkarta. |
width | Pixels | Bestäm bildens bredd. |
Globala egenskaper
<img>
Taggen stöder Globala egenskaper i HTML。
evenSTANCEegenskaper
<img>
Taggen stöder EvenSTANCEegenskaper i HTML。
Mer exempel
Exempel 3
Justera bildens position (använd 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">
Exempel 4
Lägg till bildram (använd CSS):
<img src="flower.gif" alt="[#1#]" style="border:5px solid black">
Exempel 5
Lägg till vänster och höger sidomarginaler för bilden (använd CSS):
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">
Exempel 6
Lägg till övre och nedre sidomarginaler för bilden (använd CSS):
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">
Exempel 7
Hur man lägger in en bild från en annan mapp eller från en annan webbplats:
<img src="/photo/flower.gif" alt="Blomma" width="180" height="180"> <img src="https://www.codew3c.com/photo/tree.png" alt="Träd" width="150" height="161">
Exempel 8
Hur man lägger till en hyperlänk till en bild:
<a href="https://www.codew3c.com"> <img src="w3logo.png" alt="codew3c.com" width="400" height="225"> </a>
Exempel 9
Hur man skapar en bild med klickbara områden. Varje område är en hyperlänk:
<img src="life.png" alt="Liv" 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="Kaffe" href="coffee.html"> </map>
Läs mer - Hur man använder bilder korrekt
En av HTML och XHTML:s mest imponerande egenskaper är förmågan att inkludera bilder i dokumentets text, antingen som en inbyggd objekt (inline-bild) eller som en separat dokument som kan laddas ner via en hyperlänk, eller som bakgrund till dokumentet.
Att lägga till bilder (statiska eller animerade ikoner, foton, beskrivningar, målningar, etc.) på ett rimligt sätt i dokumentets innehåll gör dokumentet mer levande och engagerande, samt mer professionellt och informativt att bläddra genom. Det är också möjligt att göra en bild till en synlig guide för en hyperlänk.
Men om du använder för många bilder blir dokumentet splittrat och kaotiskt, och svårt att läsa. Det kommer också att öka användarens väntetid betydligt när de laddar och visar sidan.
Läs följande artikel för att lära dig om de två huvudsakliga bildformaten på webben: GIF och JPEG, samt hur du korrekt använder bilder:
Standard CSS-inställningar
De flesta webbläsare kommer att visa följande standardvärden <img>
Element:
img { display: inline-block; }
Webbläsarstöd
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Stöd | Stöd | Stöd | Stöd | Stöd |