HTML’de resim neden görünmüyor? Dosya yolu ve 404 çözümü

Bir sayfa yerel bilgisayarında açılırken resimlerin yayınladığında kayboluyorsa sorun çoğu zaman HTML etiketi değil dosya yoludur. Tarayıcı, göreli adresi açık olan belgenin konumuna göre çözer. Bu yüzden masaüstündeki tam yolu kopyalamak, başka bir ziyaretçide aynı sonucu üretmez.

Önce neyi çözmek istediğini belirle

Bu rehberin hedefi, bir görsel ve bağlantıyı proje taşındığında da çalışan göreli yollarla kurmak. Dosyanın varlığını, uzantısını ve yazımını birlikte kontrol edeceğiz.

Adım adım uygula

1 Klasörü çiz. index.html ile images klasörünü aynı proje kökünde tut. Klasör adlarını küçük harfle ve boşluksuz yazmak karışıklığı azaltır.
2 Göreli yolu kur. Aynı klasördeki dosya için yalnızca adı, alt klasör için klasor/dosya, üst klasör için ../ kullan. Başında / olan yol site kökünden başlar.
3 Ağ panelini kontrol et. Geliştirici araçlarının Network bölümünü aç, sayfayı yenile. 404 dönen dosyanın tarayıcı tarafından hangi adreste arandığına bak.

Küçük bir örnek

HTML

<img src="images/kapak.jpg" alt="Çalışma masası">
<a href="dersler/html.html">HTML dersini aç</a>

Sık takılınan nokta

Kapak.JPG ile kapak.jpg bazı dosya sistemlerinde farklı dosyalardır. Ayrıca C:\Users gibi bilgisayarına özgü bir adresi web sayfasında kullanma. Görselin alt metni yüklemeyi düzeltmez; görselin anlamını aktarır.

Şimdi kendin dene

Bir images klasörü aç, içine bir görsel koy ve index.html’den göster. Ardından ikinci bir HTML dosyasını dersler klasörüne taşı. Aynı görseli bu yeni konumdan da göster.

Bir sonraki adım HTML’de yapı, bağlantı ve form dersleri →

Sık Karşılaşılan Hatalar, Nedenleri ve Hızlı Çözüm Tablosu

HTML’de resim neden görünmüyor? Dosya yolu ve 404 çözümü konusunu kendi projende uygularken en sık karşılaşılan durumları ve çözüm adımlarını aşağıdaki tabloda bulabilirsin:

Belirti / Sorun	Temel Nedeni	Nasıl Teşhis Edilir?	Kesin Çözüm
Değişiklik ekrana yansımıyor	Dosya kaydedilmemiş veya tarayıcı eski önbelleği gösteriyor	Editörde dosya adının yanında nokta işareti var mı bak	`Ctrl+S` / `Cmd+S` ile kaydet ve `Ctrl+F5` ile yenile
Büyük/küçük harf veya yol hatası	Dosya adı, seçici (`id`/`class`) veya değişken adı birebir eşleşmiyor	Konsol (F12) veya terminaldeki satır numarasını kontrol et	Türkçe karakter ve boşluk içermeyen küçük harfli adlandırma kullan
Tür veya Boş Değer (`null`/`None`) Hatası	Henüz oluşmamış bir HTML elemanına veya metin (`string`) tipindeki sayıya işlem yapmak	`console.log(typeof x)` veya `print(type(x))` ile türü yazdır	İşlem öncesi değerin varlığını (`if`) ve tür dönüşümünü (`Number`/`int`) doğrula
Ortam / Paket Uyuşmazlığı	Terminalde farklı bir klasörde veya sanal ortam dışındayken komut çalıştırmak	`pwd` (veya `cd`) ve `which python` ile konumu gör	Proje kök klasöründe doğru sanal ortamı etkinleştirerek çalıştır

Adım Adım Hata Ayıklama (Debugging) ve Temiz Kod Kontrol Listesi

1. Sorunu En Küçük Örnekte İzole Et: 200 satırlık kodda hata aramak yerine, yalnızca takıldığın satırı 5-10 satırlık küçük bir deneme alanında (Tarayıcıda Kod Dene sayfasında) tek başına çalıştır.
2. Varsayma, Konsola Yazdır: "Bu değişkenin içinde kesin 10 vardır" diye düşünmek yerine, işlemden hemen önce değişkenin değerini ve tipini ekrana yazdırarak gözünle doğrula.
3. Tek Seferde Tek Değişiklik Yap: Aynı anda hem HTML yapısını, hem CSS sınıfını hem de JavaScript fonksiyonunu değiştirirsen sorunun hangisinden kaynaklandığını bulamazsın.
4. Sınır Değerleri Test Et: Kodun normal bir girdide çalıştığında hemen bırakma; boş girdi (`""`), sıfır (`0`) veya beklenmeyen bir değer girildiğinde nasıl davrandığını da kontrol et.

Sıkça Sorulan Sorular (SSS)

Hata mesajları İngilizce olduğu için anlamakta zorlanıyorum, ne yapmalıyım? +

Hata mesajının tamamını ezberlemene gerek yoktur; yalnızca üç bilgiye odaklan: 1) Dosya adı ve satır numarası, 2) Hatanın türü (ör. SyntaxError, TypeError), 3) En sondaki kısa açıklama. Webino App'in 52 Yazılım Hatası ve Çözümü sözlüğünden Türkçe karşılıklarına anında bakabilirsin.

Bilgisayarıma program kurmadan bu örnekleri hemen deneyebilir miyim? +

Evet. Sol menüdeki Tarayıcıda Kod Dene laboratuvarını kullanarak HTML/CSS, JavaScript, Python ve SQL kodlarını hiçbir kurulum yapmadan doğrudan tarayıcında çalıştırabilirsin.

Kaynak ve devamı

Resmi belgeleri aç ↗

Webino App denemesi: Aynı dosya, iki farklı adres

Denemede sunucuda bulunan kapak görseline önce yanlış, sonra doğru yoldan istek yaptık. Görselin içeriğini değiştirmeden yalnızca yolu düzelttik. Bu, her 404’ün dosya yolu hatası olduğunu kanıtlamaz; bu örnekteki nedeni ayırır.