HTML <img> src-egenskab

HTML <img> etiket

Definition og brug

Obligatorisk src Egenskab regulerer billedets URL.

Der er to måder at specificere billedets URL på src Angiv URL i egenskaben:

1. Absolutte URL'er - Link til eksterne billeder, der er hostet på andre websteder. For eksempel:

src="https://www.codew3c.com/images/img_girl.jpg"

Bemærk:Eksterne billeder kan være beskyttet af ophavsret. Hvis du ikke har fået tilladelse til at bruge det, kan det bryde ophavsretsloven. Derudover kan du ikke kontrollere eksterne billeder; de kan pludselig blive fjernet eller ændret.

2. Relative URL'er - Link til billeder, der er hostet på den interne side.

Her inkluderer URL'en ikke domænet. Hvis URL'en ikke starter med en skråstreg, er den relativ til den aktuelle side. For eksempel:

src="img_girl.jpg".

Hvis URL'en starter med en skråstreg, er den relativ til domænet. For eksempel:

src="/images/img_girl.jpg".

Tip:Det er måske bedst at bruge relative URL'er. Hvis du ændrer domænet, vil der ikke opstå brudte links.

Bemærk:Hvis browseren ikke kan finde billedet, vises et ødelagt linkikon og alt-tekst.

Tip:For at organisere dokumentets lagring plejer skabere at gemme billedfiler i en separat mappe, og de vil ofte navngive disse mapper "pics" eller "images" og lignende. I CodeW3C.com's online undervisning har vores ingeniører lagret de fleste almindelige billeder i en mappe kaldet "i", som er en forkortelse for "images". Dette gør det muligt at forenkle stien så meget som muligt.

Eksempel

I de følgende eksempel indsætter vi et tulippebillede taget af en ingeniør fra CodeW3C.com på Shanghai's blomsterhavn på siden. Filnavnet på billedet er "eg_tulip.jpg" og det er gemt i mappen "i" på serveren. Dette er kildekoden:

<img src="/i/eg_tulip.jpg" />

The effect of the above code is:


Try it yourself

Tip:You can try our online testing toolTry it yourselfIf you change the filename in the example to "eg_chinarose.jpg", you will see a photo of a Chinese rose. Just like this:

Source code:

<img src="/i/eg_chinarose.jpg" />

The effect of the above code is:

Syntax

<img src="URL">

Attribute value

Value Description
URL

Specifies the URL of the image.

Possible values:

  • Absolute URL - points to another website (e.g., src="http://www.example.com/image.gif")
  • Relative URL - points to a file within the website (e.g., src="image.gif")

Browser support

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

HTML <img> etiket