HTML <img> src özelliği

HTML <img> etiketi

Tanım ve Kullanım

Gerekli src Özellik

img özelliğinde URL belirlemek için iki yöntem vardır: src Özellikte URL belirtilir:

1. Mutlak URL - Diğer web sitelerinde barındırılan dış resimlere bağlantı. Örneğin:

src="https://www.codew3c.com/images/img_girl.jpg"

Dikkat:Dış kaynaklı resimler telif haklarına tabi olabilir. Bu resmi kullanma izniniz yoksa, telif hakkı yasalarını ihlal edebilirsiniz. Ayrıca, dış kaynaklı resmi kontrol edemezsiniz; aniden kaldırılabilir veya değiştirilebilir.

2. Relatif URL - İçerikte barındırılan resimlere bağlantı.

Burada, URL domain'i içermez. URL'nin başında slash olmadan başlıyorsa, bu, mevcut sayfa'ya göre olacaktır. Örneğin:

src="img_girl.jpg".

URL slash ile başlıyorsa, bu域名'ye göre olacaktır. Örneğin:

src="/images/img_girl.jpg".

İpucu:En iyisi, relatif URL'leri kullanmak olabilir. Alan adını değiştirdiğinizde, bağlantı kesintiye uğramaz.

Dikkat:Eğer tarayıcı resmi bulamazsa, parçalanmış bağlantı simgesi ve alt metin gösterilir.

İpucu:Belgeyi depolamayı düzenlemek için, yaratıcılar genellikle resim dosyalarını ayrı bir klasörde saklarlar ve bu dizinleri "pics" veya "images" gibi isimlerle adlandırırlar. CodeW3C.com online eğitimlerinde, mühendisler çoğu yaygın kullanılan resmi "i" adlı bir klasörde saklarlar, "i", "images" kısaltmasıdır. Bu, yolun en fazla basitleştirilmesini sağlar.

Örnek

Aşağıdaki örnekte, CodeW3C.com mühendislerinin Şangay Güzellik Limanı'nda çektiği lilyum fotoğrafını sayfamıza ekliyoruz. Bu fotoğraf dosyasının adı "eg_tulip.jpg" olup, sunucudaki "i" klasöründe saklanmaktadır. Bu, kaynak kodudur:

<img src="/i/eg_tulip.jpg" />

Yukarıdaki kodun etkisi:


Kendi Kendine Deneyin

İpucu:Online test araçlarımızdaKendi Kendine Deneyin，Eğer örnekteki dosya adını "eg_chinarose.jpg" olarak değiştirirseniz, bir gül resmi göreceksiniz. Böylece görünüyor:

Kaynak kodu:

<img src="/i/eg_chinarose.jpg" />

Yukarıdaki kodun etkisi:

Sözdizimi

<img src="URL">

Özellik Değeri

Değer Açıklama
URL

Resmin URL'sini belirler.

Mümkün olan değerler:

  • Absolu URL - Diğer bir web sitesine yönlendirir (örneğin src="http://www.example.com/image.gif")
  • Relatif URL - Web sitesi içindeki dosyalara yönlendirir (örneğin src="image.gif")

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek

HTML <img> etiketi