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" />

Prova själv

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">

Prova själv

Tips:Mer exempel på sidan botten.

Egenskap

Egenskap Värde Beskrivning
alt Text Specificerar bildens alternativtext.
crossorigin
  • anonymous
  • use-credentials
 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
  • eager
  • lazy
 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
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 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">

Prova själv

Exempel 4

Lägg till bildram (använd CSS):

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

Prova själv

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">

Prova själv

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">

Prova själv

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">

Prova själv

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>

Prova själv

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>

Prova själv

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;
}

Prova själv

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd