Dlaczego obrazki się nie wyświetlają w HTML?

Obrazki nie wyświetlają się w HTML z różnych przyczyn, obejmujących błędy w kodzie, problemy z plikami graficznymi, ustawieniami serwera lub przeglądarki. Aby skutecznie rozwiązać te problemy, warto przeanalizować najczęstsze źródła błędów i zobaczyć, jak im zapobiec w praktyce na przykładach.

Najczęstsze przyczyny niewyświetlania obrazów w HTML

1. Nieprawidłowa ścieżka pliku

   Najczęstszym powodem jest błędna ścieżka w atrybucie src (source) znacznika <img>, przez co przeglądarka nie może odnaleźć pliku graficznego.

   Przykład niepoprawny:

   <img src="image.jpg" alt="Opis obrazka">

   Jeśli plik „image.jpg” nie znajduje się w tym samym katalogu co plik HTML, obraz się nie wyświetli.

   Przykład poprawny (jeśli obraz jest w katalogu images):

   <img src="images/image.jpg" alt="Opis obrazka">

2. Literówki lub błędy w wielkości liter w nazwie pliku

   Systemy plików na serwerach (np. Linux) rozróżniają wielkość liter. Jeśli w kodzie podasz photo.JPG, a plik nosi nazwę photo.jpg, obraz się nie załaduje.

   Popraw:

   <img src="photo.jpg" alt="Zdjęcie">

3. Plik nie został wysłany na serwer lub został usunięty

   Jeśli obraz fizycznie nie istnieje na serwerze (został usunięty lub nie został poprawnie przesłany), przeglądarka nie ma czego wyświetlić.

   Rozwiązanie:

   • Upewnij się, że plik istnieje dokładnie pod wskazanym adresem;
   • Sprawdź logi serwera lub menedżer plików serwera.
4. Zły format pliku

   Nie wszystkie formaty są wspierane przez przeglądarki. Najpewniejsze to: JPEG, PNG, GIF, SVG. Rzadziej używane lub rzadziej wspierane formaty (np. TIFF, BMP) mogą nie być obsługiwane.

   Przykład:

   <img src="logo.bmp" alt="Logo"> <!-- Może nie zadziałać w każdej przeglądarce -->
   <img src="logo.png" alt="Logo"> <!-- Bezpieczny wybór -->

5. Błędny adres URL (przy adresach względnych i bezwzględnych)

   Różnica między adresem względnym a bezwzględnym może powodować problemy, zwłaszcza gdy treść strony jest osadzona na innych domenach.

   Przykład adresu bezwzględnego:

   <img src="https://twojastrona.pl/images/photo.jpg" alt="Zdjęcie">

   Przykład adresu względnego (działa tylko, jeśli struktura katalogów się zgadza):

   <img src="images/photo.jpg" alt="Zdjęcie">

6. Uszkodzony plik graficzny

   Jeśli plik obrazu uległ uszkodzeniu (np. podczas przesyłania na serwer), przeglądarka nie będzie mogła go wyświetlić. Warto wypróbować otworzenie pliku bezpośrednio w przeglądarce.

7. Problem z cache pamięci przeglądarki

   Uszkodzona pamięć podręczna przeglądarki może fałszywie wywoływać błąd w ładowaniu obrazów. Spróbuj odświeżyć stronę skrótem CTRL+F5 lub wyczyścić cache.

8. Ograniczenia serwera lub problemy z uprawnieniami

   Jeśli serwer nie zezwala na odczyt pliku graficznego, obraz nie wyświetli się. Należy sprawdzić ustawienia uprawnień (CHMOD 644 dla plików obrazów na serwerach UNIX/LINUX).

9. Błędy w kodzie HTML lub CSS

   Błędy składniowe przy umieszczeniu znacznika <img> lub niestandardowe style CSS (np. display: none, visibility: hidden, błędnie ustawione wymiary) mogą uniemożliwić wyświetlenie grafiki.

Przykłady zastosowań i porad praktycznych

1. Wyświetlanie grafik na stronie głównej

   <img src="baner.jpg" alt="Baner główny witryny">

2. Responsywne obrazy dla urządzeń mobilnych

   <img src="product.jpg" alt="Produkt" style="max-width:100%;height:auto;">

3. Wstawienie obrazka z innego serwera (z bezwzględnym adresem URL)

   <img src="https://cdn.example.com/img/logo.svg" alt="Logo">

4. Alternatywny tekst na wypadek braku obrazu

   <img src="nie_istnieje.jpg" alt="Zdjęcie niedostępne">

   Gdy obrazek się nie wyświetli, użytkownik zobaczy tekst „Zdjęcie niedostępne”.

5. Dodanie kilku obrazków i sprawdzenie, który nie działa

   <img src="zdjecia/pies.jpg" alt="Pies">
   <img src="zdjecia/kot.jpg" alt="Kot">
   <img src="zdjecia/ptak.jpg" alt="Ptak">

   Jeśli np. „zdjecia/ptak.jpg” się nie wyświetla – najpierw sprawdź:

   • Ścieżkę do pliku;
   • Nazwę i rozszerzenie (wielkość liter);
   • Obecność pliku na serwerze.

Podsumowanie najczęstszych błędów w tabeli

Jeśli obrazki nie wyświetlają się w HTML – zawsze najpierw zacznij od sprawdzenia ścieżki i fizycznego istnienia pliku, a dopiero potem analizuj inne przyczyny. Regularne stosowanie powyższych praktyk minimalizuje ryzyko napotkania problemów z grafikami na Twojej stronie internetowej.