HTML <img> src-eigenschap

HTML <img> tag

Definitie en gebruik

Verplicht src Eigenschap die de URL van het beeld regelt.

Er zijn twee manieren om de URL van een afbeelding in de eigenschap te specificeren. src URL specificeren in de eigenschap:

1. Absoluut URL - Koppeling naar externe afbeeldingen die op andere websites worden gehost. Bijvoorbeeld:

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

Let op:Externe afbeeldingen kunnen beschermd zijn door copyright. Als je geen toestemming hebt om het te gebruiken, kan dit in strijd zijn met het copyrightwetboek. Bovendien kun je geen controle uitoefenen op externe afbeeldingen; ze kunnen plotseling worden verwijderd of gewijzigd.

2. Relatieve URL - Koppeling naar afbeeldingen die op de website worden gehost.

Hierin omvat de URL geen domeinnaam. Als de URL niet begint met een schuine streep, is het relatief ten opzichte van de huidige pagina. Bijvoorbeeld:

src="img_girl.jpg"。

Als de URL begint met een schuine streep, is het relatief ten opzichte van de domeinnaam. Bijvoorbeeld:

src="/images/img_girl.jpg"。

Tip:Het is misschien het beste om relatieve URL's te gebruiken. Als je de domeinnaam wijzigt, ontstaat er geen brakke koppeling.

Let op:Als de browser de afbeelding niet kan vinden, wordt een gebroken koppelingpictogram en alt-tekst weergegeven.

Tip:Om de opslag van documenten te organiseren, plaatsen makers meestal afbeeldingsbestanden in een aparte map en noemen deze mappen vaak "pics" of "images" enz. In de online tutorials van CodeW3C.com hebben onze ingenieurs de meeste veelgebruikte afbeeldingen opgeslagen in een map genaamd "i", wat een afkorting is van "images". Het voordeel hiervan is dat het pad zo veel mogelijk wordt vereenvoudigd.

Voorbeeld

In het volgende voorbeeld hebben we een tulpenfoto genomen door een ingenieur van CodeW3C.com in het Shanghai Bloemenpark geplaatst in de pagina. De naam van het bestand van deze foto is "eg_tulip.jpg" en het wordt opgeslagen in de "i"-map op de server. Dit is de broncode:

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

Het effect van de bovenstaande code:


Probeer het zelf

Tip:Je kunt het in onze online testtoolProbeer het zelfAls je de bestandsnaam in de voorbeeldcode wijzigt naar "eg_chinarose.jpg", zie je een foto van een roos. Zoals hieronder:

Broncode:

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

Het effect van de bovenstaande code:

Syntaxis

<img src="URL">

Eigenschapswaarde

Waarde Beschrijving
URL

Stelt de URL van het afbeelding vast.

Mogelijke waarden:

  • Absoluut URL - verwijst naar een andere website (zoals src="http://www.example.com/image.gif")
  • Relatieve URL - verwijst naar een bestand binnen de website (zoals src="image.gif")

Browserondersteuning

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning

HTML <img> tag