Dlaczego obrazek nie chce się załadować w HTML?

Obrazek w HTML może się nie ładować z wielu powodów, zarówno technicznych, jak i wynikających z błędów w kodzie lub konfiguracji serwera. Skuteczne rozwiązanie problemu wymaga systematycznego sprawdzenia kilku kluczowych kwestii związanych z prawidłowym umieszczeniem, nazwą i formatem pliku oraz poprawnością kodu HTML.

Najczęstsze przyczyny, dla których obrazek nie wyświetla się w HTML

• Nieprawidłowa ścieżka pliku – przeglądarka nie potrafi znaleźć obrazka, jeśli ścieżka podana w atrybucie src jest błędna. Sprawdź, czy katalogi oraz nazwa pliku są poprawnie wpisane, np. <img src="images/moj-obrazek.jpg">. Najczęstsze błędy to:

• Literówki w nazwie pliku lub nazwy folderu,
• brak rozróżnienia wielkości liter (np. Logo.JPG to nie to samo co logo.jpg na serwerach typu Linux),
• użycie względnych ścieżek, które nie prowadzą do właściwego katalogu.

Przykład poprawnego kodu –

<!-- Plik obrazka znajduje się w folderze 'images' obok pliku HTML -->
<img src="images/przyklad.jpg" alt="Przykladowy obrazek">

• Brak lub uszkodzony plik na serwerze – obrazek fizycznie nie został przesłany; serwer nie znajdzie pliku, a przeglądarka wyświetli pusty prostokąt lub błąd. Zdarza się to zwłaszcza przy ręcznym przenoszeniu plików za pomocą FTP lub podczas automatycznego wdrażania strony. Sprawdź obecność i integralność pliku graficznego.
• Niepoprawna wielkość liter w nazwie pliku – systemy operacyjne serwera rozróżniają wielkość liter w nazwach plików. Kod HTML w Windows może działać z Logo.JPG, ale na serwerze Linux plik musi mieć dokładnie tę samą nazwę, włączając wielkie i małe litery.
• Błędny format lub uszkodzony plik graficzny – przeglądarki internetowe obsługują najpopularniejsze formaty graficzne takie jak JPEG, PNG, GIF, SVG, WebP. Jeśli plik graficzny jest uszkodzony lub w niestandardowym formacie (np. TIFF), przeglądarka nie wyświetli obrazu.

Jak sprawdzić?

• Otwórz plik graficzny bezpośrednio w przeglądarce. Jeśli się nie wyświetla, plik jest uszkodzony lub nieobsługiwany.

• Brak uprawnień do pliku po stronie serwera – w przypadku hostingu plik może nie być widoczny z powodu nieprawidłowych uprawnień do odczytu na serwerze. Plik i cały katalog powinny mieć odpowiednie prawa (np. 644 dla pliku i 755 dla folderu na serwerach UNIX/Linux).
• Problemy z pamięcią podręczną przeglądarki – czasem obraz nie odświeża się z powodu cache przeglądarki. Należy wymusić odświeżenie (Ctrl+F5) lub wyczyścić pamięć podręczną.
• Błędny kod HTML – niepoprawna składnia w tagu <img>, np. brak zamknięcia cudzysłowu, brak atrybutu src albo literówki w nazwie tagu, mogą uniemożliwić wyświetlenie obrazka.

Przykład błędnego zapisu –

<!-- Brakuje cudzysłowu -->
<img src=images/moj-obrazek.jpg alt="Przykladowy obrazek>

Poprawny zapis –

<img src="images/moj-obrazek.jpg" alt="Przykladowy obrazek">

• Blokowanie przez przeglądarkę lub polityki zabezpieczeń – czasami obrazki nie wczytują się na skutek polityk CORS lub ustawień zabezpieczeń (np. wymuszanie HTTPS, blokowanie hotlinkowania).

Dobre praktyki i przykłady zastosowań

• Stosuj zawsze atrybut alt – dzięki temu, nawet jeśli obrazek się nie wyświetli, użytkownik zobaczy alternatywny tekst.

<img src="images/logo.png" alt="Logo firmy">

• Używaj formatów zgodnych z przeglądarkami – jpeg, png, svg, gif, webp to najpewniejszy wybór.
• Sprawdzaj każdy krok wdrożenia –

1. Zweryfikuj, czy wskazana ścieżka istnieje na serwerze,
2. otwórz sam plik graficzny bezpośrednio przez adres URL,
3. sprawdź poprawność nazw i rozszerzeń.

• Przykład zastosowania obrazka jako tła w CSS –

.baner {
	background-image: url('images/tlo-banera.jpg');
	height: 200px;
	width: 100%;
}

• Wczytywanie obrazów z zewnętrznego serwera –

<img src="https://cdn.domena.pl/grafiki/ikona.svg" alt="Zdalna grafika">

Uwaga: upewnij się, że zewnętrzny serwer nie blokuje tzw. hotlinkowania.

Podsumowanie

Najczęstszą przyczyną problemów z wyświetlaniem obrazków w HTML jest nieprawidłowa ścieżka do pliku, brak pliku na serwerze lub problem z wielkością liter w nazwach plików. Zawsze warto dokładnie sprawdzić ścieżkę relatywną, przesłać plik do odpowiedniego katalogu, zadbać o zgodność nazw oraz przetestować rozwiązanie na docelowym serwerze przed publikacją strony.