HTML <img> src-egenskap

HTML <img> etikett

Definition och användning

Obligatorisk src egenskapen reglerar bildens URL.

Det finns två sätt att specificera bildens URL i src Specificera URL i egenskapen:

1. Absolut URL - Länka till externa bilder som lagra på andra webbplatser. Till exempel:

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

Observera:Externa bilder kan vara skyddade av upphovsrätt. Om du inte har fått tillstånd att använda dem, kan det bryta mot upphovsrättslagen. Dessutom kan du inte styra externa bilder; de kan plötsligt tas bort eller ändras.

2. Relativ URL - Länka till bilder som lagra på webbplatsen.

Här inkluderar URL:en inte domänen. Om URL:en inte börjar med en snedstreck, är den relativ till den aktuella sidan. Till exempel:

src="img_girl.jpg"。

Om URL:en börjar med en snedstreck, är den relativ till domänen. Till exempel:

src="/images/img_girl.jpg"。

Tips:Det kanske är bäst att använda relativa URL:er. Om du ändrar domän, kommer det inte att uppstå brista länkar.

Observera:Om webbläsaren inte hittar bilden, visas en trasig länkikon och alt-text.

Tips:För att organisera dokumentets lagring, lagrar skaparna vanligtvis bildfiler i en separat mapp och namnger dessa mappar ofta "pics" eller "images". I CodeW3C.com:s onlinekurser lagrar våra ingenjörer de flesta vanliga bilderna i en mapp som heter "i", vilket är en förkortning av "images". Fördelen med detta är att det maximerar förenklade sökvägar.

Exempel

I följande exempel, lägger vi till en tulippbild som tagits av en ingenjör på CodeW3C.com vid Shanghai's blomsterhamn på sidan. Filnamnet på bilden är "eg_tulip.jpg" och den lagras i mappen "i" på servern. Detta är källkoden:

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

Effekten av ovanstående kod:


Prova själv

Tips:Du kan testa i vår online-testverktygProva själv，om du ändrar filnamnet i exempel till "eg_chinarose.jpg" kommer du att se en bild av en rosal. Som detta:

Källkod:

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

Effekten av ovanstående kod:

Syntax

<img src="URL">

Attributvärde

Värde Beskrivning
URL

Definierar URL:en för bilden.

Möjliga värden:

  • Absolut URL - pekar på en annan webbplats (t.ex. src="http://www.example.com/image.gif")
  • Relativ URL - pekar på en fil inom webbplatsen (t.ex. src="image.gif")

Webbläsarstöd

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

HTML <img> etikett