HTML <img> src ominaisuus

HTML <img> -elementti

Määrittely ja käyttö

Välttämätön src ominaisuus määrittää kuvan URL-osoitteen.

On kaksi tapaa määritellä src Määritä URL-osoite ominaisuudessa:

1. Absoluuttinen URL - Linkitetään toisessa sivustossa tallennettuun ulkoiseen kuvaan. Esimerkiksi:

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

Huomioitavaa:Ulkoinen kuva saattaa olla tekijänoikeuksien alainen. Jos et ole saanut siihen käyttöoikeutta, voit rikkoa tekijänoikeuslakeja. Lisäksi et voi hallita ulkoista kuvaa; se voi poistua yhtäkkiä tai muuttua.

2. Suhteellinen URL - Linkitetään sivustolla tallennettuun kuvaan.

Tässä URL-osoitteessa ei ole mukana domenia. Jos URL-osoite ei aloita vinoristilauksella, se on suhteellinen nykyiseen sivuun. Esimerkiksi:

src="img_girl.jpg"。

Jos URL-osoite alkaa vinoristilauksella, se on suhteellinen domeniin. Esimerkiksi:

src="/images/img_girl.jpg"。

Vinkki:On ehkä parasta käyttää suhteellisia URL-osoitteita. Jos muutat dominiä, et tule kohtaamaan katkoksia.

Huomioitavaa:Jos selain ei löydä kuvaa, se näyttää rikkoutuneen linkin ikonin ja alt-tekstin.

Vinkki:Dokumentin tallennuksen järjestämiseksi luoja asettaa yleensä kuvatiedostot erilliseen kansioon ja nimeää ne "pics" tai "images" -kaltaiseksi. CodeW3C.com:n verkkokurssissa insinöörimme sijoittavat suurimman osan yleisimmistä kuvista nimettyyn kansioon "i", joka on "images"-sanan lyhenne. Tämä tekniikka yksinkertaistaa polkujen käyttöä mahdollisimman paljon.

Esimerkki

Esimerkissä alla olevassa tekstissä, lisäsimme sivulle CodeW3C.com:n insinöörien ottaman krokosia-valokuvan, jonka tiedostonimi on "eg_tulip.jpg" ja joka sijaitsee palvelimen "i"-kansiossa. Tämä on lähdemalli:

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

Yllä olevan koodin vaikutus:


Kokeile itse

Vinkki:Voit käyttää verkkotestityökalujammeKokeile itse，jos muutat esimerkin tiedostonimeksi "eg_chinarose.jpg", näet kuvan kookokukasta. Tässä näkökulmassa:

Lähdekoodi:

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

Yllä olevan koodin vaikutus:

Syntaksi

<img src="URL">

Ominaisuusarvo

Arvo Kuvaus
URL

Määrittää kuvan URL-osoitteen.

Mahdolliset arvot:

  • Absoluuttinen URL - osoittaa toiseen verkkosivustoon (esim. src="http://www.example.com/image.gif")
  • Suhteellinen URL - osoittaa verkkosivuston sisäiseen tiedostoon (esim. src="image.gif")

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki

HTML <img> -elementti