Poprawny zapis <img src="../../katalog_2/katalog_B/obrazek.png"> wynika bezpośrednio z położenia pliku HTML i grafiki w strukturze katalogów. plik.html znajduje się w katalogu_1/katalog_A, a obrazek.png w katalogu_2/katalog_B. Żeby przeglądarka mogła odnaleźć plik graficzny, ścieżka względna musi krok po kroku „przejść” po tej strukturze. Najpierw ../../ cofa nas dwa poziomy w górę: z katalog_A do katalog_1, a potem z katalog_1 do katalogu głównego, w którym znajdują się katalog_1 i katalog_2. Następnie wchodzimy do katalog_2, potem do katalog_B i dopiero tam leży obrazek.png. To dokładnie odzwierciedla poprawną, relatywną drogę od pliku HTML do zasobu graficznego. Z mojego doświadczenia w projektach webowych używanie poprawnych ścieżek względnych jest kluczowe, szczególnie gdy serwis ma rozbudowaną strukturę folderów albo jest później przenoszony między środowiskami (np. localhost, serwer testowy, produkcja). Dzięki ścieżkom względnym, takim jak ../../katalog_2/katalog_B/obrazek.png, kod HTML jest bardziej przenośny i nie trzeba modyfikować adresów po każdej zmianie domeny czy katalogu głównego. Warto też pamiętać, że atrybut src w znaczniku <img> zawsze wskazuje na zasób, który przeglądarka ma pobrać – może to być ścieżka względna, bezwzględna w obrębie serwera lub pełny URL z protokołem. W praktyce przy większych projektach dobrze jest utrzymywać spójną konwencję nazewnictwa katalogów (np. img, assets, static) i stosować logiczną strukturę, żeby takie ścieżki były łatwe do ogarnięcia. Moim zdaniem warto też na wczesnym etapie przyzwyczaić się do „ręcznego” analizowania, skąd jest liczona ścieżka – zawsze od lokalizacji aktualnego dokumentu HTML, chyba że używamy ścieżek absolutnych od katalogu głównego serwera.
Problem z niepoprawnymi odpowiedziami wynika z niezrozumienia, skąd dokładnie liczona jest ścieżka do pliku oraz jak działa nawigacja po katalogach w adresach względnych. Przeglądarka zawsze interpretuje wartość atrybutu src w <img> zaczynając od lokalizacji aktualnego dokumentu HTML, czyli w tym przypadku od katalogu katalog_1/katalog_A. Jeżeli wpiszemy po prostu nazwę pliku, bez żadnych katalogów, to przeglądarka szuka go w tym samym folderze co plik HTML. Zapis <img src="obrazek.png"> sugeruje więc, że obrazek.png leży obok plik.html w katalogu_A. Ponieważ w przedstawionej strukturze plik graficzny znajduje się zupełnie gdzie indziej, taka ścieżka po prostu nie może zadziałać. Kolejny typ błędu to nieprawidłowe użycie sekwencji /../ na początku ścieżki. W kontekście URL-a ukośnik na początku oznacza ścieżkę absolutną liczoną od katalogu głównego serwera (tzw. root). Dodawanie zaraz po nim .. jest w praktyce bez sensu, bo nie możemy cofnąć się powyżej katalogu głównego. Takie konstrukcje typu "/../katalog_1/..." czy "/../katalog_2/..." nie odzwierciedlają realnej struktury katalogów widzianej przez serwer WWW. To częsty błąd: mieszanie myślenia systemu plików w eksploratorze z zasadami adresacji URL. W systemie operacyjnym czasem zobaczymy .. na początku ścieżki względnej, ale w URL po wiodącym slashu ścieżka jest już traktowana jako absolutna. Prawidłowe podejście polega na świadomym liczeniu poziomów: pojedyncze .. cofa o jeden katalog w górę, podwójne ../../ o dwa, i dopiero potem dokładamy kolejne katalogi prowadzące do docelowego pliku. Warto też pamiętać, że w projektach webowych lepiej unikać "dziwnych" konstrukcji ze zbędnym /../, bo to utrudnia debugowanie i rodzi problemy przy przenoszeniu strony na inny serwer. Typowym błędem myślowym jest też założenie, że jak coś wygląda logicznie w drzewku folderów na ekranie, to tak samo zadziała w URL, bez dokładnego prześledzenia, od jakiego katalogu liczymy ścieżkę. Dlatego dobrą praktyką jest narysowanie sobie tej struktury i ręczne przejście krok po kroku: tu jest plik.html, tu jest obrazek.png, ile razy muszę się cofnąć .. i gdzie potem wejść, żeby dojść dokładnie do tego pliku.