Kuvat ovat olennainen osa verkkosivujen suunnittelua. Ne tekevät verkkosivusta houkuttelevan vierailijalle. Ne voidaan helposti sisällyttää HTML-dokumenttiin käyttämällä <img>-tagia.

• src: pakollinen attribuutti. Sen arvo on polku kuvan sijaintiin. Polku voi olla absoluuttinen tai suhteellinen;

• alt: pakollinen attribuutti. Tarjoaa vaihtoehtoisen tekstin, joka voidaan näyttää, kun kuvaa ei voida renderöidä;

• width ja height: määrittävät kuvan koon pikseleinä. Ilman näitä attribuutteja kuva renderöidään alkuperäisessä koossaan.

alt-attribuutti

Kuvan kuvauksen tulisi olla informatiivinen ja merkityksellinen. Se auttaa kuvailemaan kuvaa ihmisille, joilla on näkövamma tai jotka eivät pysty näkemään sitä. Tällä tavalla selain lukee alt-attribuutin, ja käyttäjä voi ymmärtää, miksi verkkosivustolla on tämä kuva.

Kuvitellaan seuraava esimerkki. Sinulla on lähde hevoskilpailuista. Haluat näyttää, kuinka kilpailijat valmistautuvat kilpailuun.

alt-attribuutin huono arvo on:

alt-attribuutin hyvä arvo on:

Alt-teksti "Mies hevosen selässä" on liian yleinen ja puuttuu konteksti. Se tarjoaa perustason kuvauksen, mutta ei välitä hyödyllisiä yksityiskohtia kohtauksesta tai kuvan tarkoituksesta.

src-attribuutti

src-attribuutti voi käyttää sekä absoluuttisia että suhteellisia polkuja kuvatiedoston sijainnin määrittämiseen.

Absoluuttinen polku

Se määrittää kuvatiedoston täydellisen URL-osoitteen verkkopalvelimella. Esimerkiksi:

Se tarkoittaa, että kuvatiedosto sijaitsee internetissä linkissä https://example.com/images/image.jpg. Kuka tahansa voi käyttää kuvaa tämän linkin kautta.

Tarkastele seuraavaa todellista esimerkkiä alla olevassa koodihiekkalaatikossa:

Huomautus

Tutkiaksesi tiedostokansiorakennetta, vedä liukusäädintä koodihiekkalaatikon käyttöliittymän vasemmalla puolella. Vasemmassa yläkulmassa löydät hampurilaispainikkeen, jota edustavat kolme raitaa. Napsauttamalla tätä painiketta siirryt tiedostokansioiden järjestelyyn.

Suhteellinen polku

Se määrittää kuvatiedoston sijainnin suhteessa nykyiseen asiakirjaan. Esimerkiksi:

Se tarkoittaa, että image.jpg tiedosto sijaitsee images hakemistossa.

Tarkista alla olevassa koodisandboxissa annettu todellinen esimerkki. Löydät images kansion, joka sisältää sun.png tiedoston.

Huomautus

Yhteenvetona suhteellisten ja absoluuttisten polkujen eroista, absoluuttinen polku edustaa todellista linkkiä, jota kuka tahansa voi käyttää kuvan avaamiseen. Toisaalta suhteellinen polku on linkki oman projektisi kontekstissa. Se viittaa paikalliseen kuvaan ja polkuun, johon kuka tahansa projektin sisällä voi päästä.