Dodawanie zdjęcia z dysku

Jeśli chcemy dodać zdjęcie z naszego dysk musimy dowiedzieć się jaką wartość podać w naszym atrybucie „src”. Możemy zrobić to na 2 sposoby poprzez dodanie linku bezwzględnego i względnego

Przykłady linków:

Link bezwzględny:
C:\pulpit\page\img\demo.jpg

Link względny to taki który podaje całą ścieżkę do pliku. Jak widzimy w powyższym przykładzie jest to link zaczynający się od dysku C:/…. 

Link względny:
./demo.jpg

Odnosi się do aktualnego katalogu w którym jesteśmy. Nawigujemy od bieżącego folderu a nie jak w przypadku linku bezwzględnego od samej góry hierarchii katalogów.

„./” – jest to katalogu w którym aktualnie jesteśmy (nie jest to ten który aktualnie widzimy na pulpicie. Jest to katalog w który znajduje się nasza strona internetowa którą otworzyliśmy w naszej przeglądarce).

Przykład użycia 1:
Mamy utworzony folder o nazwie „page” w którym znajdują się 2 pliki (index.html – strona oraz demo.jpg – obrazek)
Obrazek posiada pusty atrybut alt; plik o nazwie Screenshot-2019-03-18-at-21.50.08.png

W takiej sytuacji aby obrazek został poprawnie wyświetlony nasz element img” powinien wyglądać następująco:

<img src="./demo.jpg">

Przykład użycia 2:
Dodajmy nowy folder „img” i przenieśmy do niego obrazek. Struktura wygląda następująco:


Żeby poprawnie wyświetlić nasz obrazek odwołujemy się od obecnego katalogu „./” w następnej kolejności odwołujemy się do katalogu „img/” ponieważ jest on na tym samym poziomie co nasz index.html oraz nazwę obrazka „demo.jpg”. Całość wygląda następująco:

<img src="./img/demo.jpg">

Przykład użycia 3:
Spójrzmy na strukturę katalogów:


Jak widzimy nasza strona znajduję się w katalogu „home” a obrazek w „img” co więcej nasze katalogi są na tym samym poziomie zagnieżdżenia. Otwierając stronę w przeglądarce internetowej, wpisując w atrybucie src „./” będziemy odnosić się do katalogu home. Nie możemy zrobić czegoś takiego „./img/demo.jpg”, ponieważ w katalogu „home” nie ma podkatalogu o nazwie „img” tylko jest poziom wyżej. Aby wyjść wyżej trzeba dodać do naszego linku „../”. Cały link wygląda następująco: 

<img src="./../img/demo.jpg">

„./” – nasz katalog główny
„../” – wychodzimy wyżej w naszej hierarchii katalogów 
„img” – nazwa katalogu z obrazkiem
„demo.jpg” – nazwa obrazka

Pamiętaj !
Używaj linków względnych ponieważ jeśli byśmy chcieli przenieść naszą witrynę na serwer gdzie jest inna struktura katalogów a często nawet inny system(Linux) nasz przykładowy link bezwzględny „C:\ … ” nie będzie działać