Sökvägar
Webbläsaren gissar aldrig
Sökväg Adressen till en fil, t.ex. assets/img/profil.webp. En relativ sökväg utgår från filen du skriver i och används för allt i det egna projektet. En absolut sökväg (https://...) används endast för externa resurser på andra servrar. är adresserna till dina filer. Om adressen är fel kommer brevet (bilden eller CSS-filen) aldrig fram.Relativt vs absolut
| Typ | Exempel | När? |
|---|---|---|
| Relativ | images/logo.png | För allt som ligger i ditt eget projekt. |
| Absolut | https://google.com/logo.png | Endast för externa resurser på andra servrar. |
Case-sensitivity
Webbservrar kör Linux. För Linux är style.css och Style.css två helt olika filer. Om din fil heter style.css men du länkar till Style.css i din HTML får du en 404 vid publicering, trots att det kanske fungerade lokalt.
Pröva i DevTools: Diagnostisera ett 404-fel
Om en bild eller CSS-fil saknas på din publicerade sida, gissa inte vad felet är. Öppna DevTools och gå till fliken Console.
Om en sökväg är trasig kommer servern att ropa i röd text: GET https://.../img/Profil.webp net::ERR_ABORTED 404 (Not Found).
Läs den röda raden noggrant. Jämför bokstav för bokstav (inklusive stora/små) med hur filen faktiskt är döpt i ditt projekt så kommer du hitta felet.
Uppgift: Den försvunna bilden
Fortsätt med filerna från föregående del, Bilder på webben.
- Flytta dina bilder till en mapp som heter
assets/img/. - Laga alla
<img>-taggar i din HTML så att bilderna visas igen. - Flytta din CSS-fil till en mapp som heter
css/. - Laga
<link>-taggen i din HTML. - Committa och pusha till GitHub Pages.
- Verifiera: Öppna DevTools (F12) och gå till fliken Network. En lista utan röda rader bekräftar att allt är rätt på din live-sida.
Vad händer om…
Byt skiftläge på en bokstav i en bildfils namn på din dator (t.ex. Profil.webp till profil.webp) utan att uppdatera din <img src>. Testa lokalt i Live Server, fungerar det? Pusha sedan till GitHub Pages och ladda om. Skiljer sig resultatet? Det är skillnaden mellan Windows/Mac:s skiftlägesokänsliga filsystem och Linux-serverns skiftlägeskänsliga.
Motivera & reflektera
I ditt repos README, skriv en mening om varför “det funkar på min dator” inte betyder att det funkar på servern. Vilken regel för filnamn tänker du följa i alla framtida projekt för att slippa det här felet?