HTML <img> tag

Definition og brug

<img> Etiketten bruges til at indlejre billeder i HTML-sider.

Teknologisk set er billedet faktisk ikke indsat i websiden, men er blevet linket til websiden.<img> Etiketten opretter en container til at referere til billedet.

<img> Etiketten har to obligatoriske egenskaber:

  • src - Angiv billedets sti
  • alt - Hvis billedet ikke kan vises af nogen grund, skal du specificere billedets erstatningstekst

Bemærk:Desuden skal du altid specificere billedets bredde og højde. Hvis bredde og højde ikke specificeres, kan siden blinke under billedets indlæsning.

Tip:For at linke et billede til en anden dokument, skal du kun indsætte <img> Etiketten er indlejret i <a> Inden i etiketten (se eksemplet nedenfor).

Se også:

HTML-læringskursus:HTML images

HTML DOM-referencemanual:Image-objekt

CSS-læringskursus:Indstil billedets stil

Læs mere:Sådan bruges billeder korrekt

Eksempel

Eksempel 1

I de følgende eksempler indsætter vi et tulippebillede, taget af en ingeniør fra CodeW3C.com på Shanghai Flower Port:

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

Try it yourself

Shanghai Flower Port - Tulip

Eksempel 2

En anden måde at indsætte et billede på:

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

Try it yourself

Tip:Flere eksempler findes på siden bunden.

Egenskab

Egenskab Værdi Beskrivelse
alt Tekst Angiver billedets erstatningstekst.
crossorigin
  • anonymous
  • use-credentials
 Tillader brug af billeder fra tredjepartswebsteder, der tillader krydsdomæneadgang, sammen med canvas.
height Pixel Angiver billedets højde.
ismap ismap Definerer billedet som en server-side billedmappning.
loading
  • eager
  • lazy
 Angiver, om browseren skal load billedet med det samme, eller forsinke loadningen indtil visse betingelser er opfyldt.
longdesc URL Angiver URL'en, der peger på billedets detaljerede beskrivelse.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Angiver refereringsinformation, der skal bruges ved hentning af billedet.
sizes Størrelse Angiver billedstørrelsen for forskellige sider.
src URL Angiver stien til billedet.
srcset URL-list Definer liste over billedfiler, der bruges i forskellige situationer.
usemap #mapname Definer billedet som en klient-side billedkάρte.
width Pixel Definer billedets bredde.

Globale egenskaber

<img> Tagget understøtter Globale egenskaber i HTML。

eventegenskaber

<img> Tagget understøtter Eventegenskaber i HTML。

Flere eksempler

Eksempel 3

Juster billedets placering (brug 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

Eksempel 4

Tilføj kantlinje til billedet (brug CSS):

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

Try it yourself

Eksempel 5

Tilføj venstre og højre kantmarginal til billedet (brug CSS):

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

Try it yourself

Eksempel 6

Tilføj øvre og nedre kantmarginal til billedet (brug CSS):

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

Try it yourself

Eksempel 7

Hvordan indsætte et billede fra en anden mappe eller en anden hjemmeside:

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

Try it yourself

Eksempel 8

Sådan tilføjes et hyperlink til et billede:

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

Try it yourself

Eksempel 9

Sådan oprettes et billede med klikbare områder. Hver region er en hyperlink:

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

Try it yourself

Udvidet læsning - hvordan man korrekt bruger billeder

En af HTML og XHTML's mest bemærkelsesværdige egenskaber er evnen til at inkludere billeder i dokumentets tekst, enten som en del af dokumentet (inline-billede) eller som en separat dokument, der kan downloades via en hyperlink, eller som dokumentets baggrund.

At tilføje billeder (statiske eller animerede ikoner, billeder, beskrivelser, tegninger osv.) på en rimelig måde i dokumentets indhold gør det mere levende og engagerende, ser mere professionelt ud og er lettere at navigere. Det er også muligt at gøre et billede til en synlig vejledning for en hyperknap.

Men hvis billeder bruges for meget, kan dokumentet blive kaotisk og svært at læse, hvilket også vil øge de unødvendige ventetider for brugere, når de downloader og viser siden.

Læs venligst nedenstående artikel for at lære om de to vigtigste billedformater på internettet: GIF og JPEG, samt hvordan man korrekt bruger billeder:

Standard CSS-indstillinger

De fleste browsere vil vise følgende standardværdier <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