Src içermeyen bir resim eklemenin geçerli yolu nedir?

Dinamik olarak bir src ile daha sonra javascript ile dolduracak bir görüntü var ama kolaylığı için görüntü etiketi sayfa yükü var ama sadece bir şey görüntülemek değil istiyorum. <img src='' />Geçersiz olduğunu biliyorum , bu yüzden bunu yapmanın en iyi yolu nedir?

Bir resmin kaynağını atlamak için hiçbir geçerli yolu olmasa da, orada olan kaynaklar hangi olmaz sunucu isabet neden olur. Geçenlerde iframes ile benzer bir sorun yaşadım ve //:0en iyi seçenek olarak belirledim. Hayır, gerçekten!

//(Protokolün çıkarılması) ile başlamak , geçerli sayfanın protokolünün kullanılmasına neden olarak HTTPS sayfalarındaki "güvensiz içerik" uyarılarını önler. Ana bilgisayar adını atlamak gerekli değildir, ancak kısaltır. Son olarak, bir :0sunucu isteği yapılmamasını sağlar (spesifikasyona göre geçerli bir port değildir).

Bu, herhangi bir tarayıcıda hiçbir sunucu isabetine veya hata mesajına neden olmadığım bulduğum tek URL. javascript:void(0)HTTPS aracılığıyla sunulan bir sayfada kullanılırsa - - seçimi IE7'de "güvenli olmayan içerik" uyarısına neden olur. Başka herhangi bir bağlantı noktası, geçersiz adresler için bile sunucu bağlantısının denenmesine neden oldu. (Bazı tarayıcılar yalnızca geçersiz istekte bulunur ve zaman aşımına uğrar.)

Bu Chrome, Safari 5, FF 3.6 ve IE 6/7/8'de test edildi, ancak herhangi bir deneme isteğini öldüren ağ katmanı olması gerektiği için herhangi bir tarayıcıda çalışmasını beklerim.

Başka bir seçenek de boş bir görüntü yerleştirmektir. Amacınıza uygun herhangi bir resim olur, ancak aşağıdaki örnek yalnızca 26 baytlık bir GIF kodlar - http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />

Aşağıdaki yoruma göre düzenleyin:

Tabii ki, tarayıcı desteği gereksinimlerinizi göz önünde bulundurmalısınız. IE7 veya daha azı için destek yok. http://caniuse.com/datauri

Bugünlerde IMHO boş bir img src için en iyi kısa, aklı başında ve geçerli bir yol şöyledir:

<img src="data:," alt>
or
<img src="data:," alt="Alternative Text">

İkinci örnekte "Alternatif Metin" (ayrıca Chrome ve IE'de bozuk resim simgesi) gösterilmektedir.

"data:,"geçerli bir URI. Boş bir ortam türü varsayılan olarak text/plain. Böylece boş bir metin dosyasını temsil eder ve"data:text/plain,"

Öğeleri dinamik olarak eklemenizi öneririm ve jQuery veya başka bir JavaScript kitaplığı kullanıyorsanız oldukça basittir:

• http://api.jquery.com/appendTo/
• http://api.jquery.com/prependTo/
• http://api.jquery.com/html/

ayrıca bak prepend ve append. Aksi takdirde, böyle bir resim etiketiniz varsa ve doğrulamasını istiyorsanız, 1 piksel şeffaf gif veya png gibi sahte bir resim kullanmayı düşünebilirsiniz.

Bunu bir süredir yapmadım, ama aynı şeyi bir kez yapmak zorunda kaldım.

<img src="about:blank" alt="" />

Benim favorim - //:0 bir bağlantı noktası sıfır (tcpmux bağlantı noktası?) Üzerinde kaynak sunucuya HTTP / HTTPS bağlantısı yapmaya çalışacağınız anlamına gelir - ki bu muhtemelen zararsızdır, ama yine de yapmamayı tercih ederim. Heck, tarayıcı bağlantı noktasını sıfır görebilir ve hatta bir istek göndermeyebilir. Ama yine de muhtemelen böyle demek istemediğinizde bu şekilde belirtilmemeyi tercih ederim.

Her neyse, about:blanktest ettiğim tüm tarayıcılarda görüntülenmesi aslında çok hızlı. Sadece W3C doğrulayıcısına attım ve şikayet etmedim, bu yüzden geçerli olabilir.

Düzenleme : Bunu yapma; tüm tarayıcılarda çalışmaz (bu yanıtın yorumlarında belirtildiği gibi bir 'bozuk resim' simgesi gösterilir). <img src='data:...Aşağıdaki çözümü kullanın . Ya da geçerliliği önemsemiyorsanız, ancak yine de sunucunuza gereksiz isteklerden kaçınmak istiyorsanız, <img alt="" />src özelliği olmadan bunu yapabilirsiniz . Ama bu GEÇERSİZ HTML, bu yüzden dikkatlice seçin.

Bir dizi farklı yöntemi gösteren Test Sayfası: http://desk.nu/blank_image.php - her türlü farklı doküman ve içerik türüyle sunulur. - aşağıdaki yorumlarda belirtildiği gibi, Mark Ormston'un yeni test sayfasını şu adresten kullanın: http://memso.com/Test/BlankImage.html

Yorumlarda yazıldığı gibi, bu yöntem yanlıştır.

Bu cevabı daha önce bulamadım, ancak W3 Specs geçerli boş srcetikete göre bir çapa bağlantısı olurdu #.

Örnek: src="#",src="#empty"

Sayfa başarıyla doğrulanıyor ve ekstra istek yapılmıyor.

Ben sadece src boş bir dizeye ayarlamak ve kırık görüntü simgesi gizlemek için CSS bir kural eklemek iyi çalışıyor bulundu.

[src=''] {
    visibility: hidden;
}

src özniteliğini tutarsanız boş tarayıcı, geçerli sayfa URL'sine istek gönderir, herhangi bir url istemiyorsanız src özniteliğine her zaman 1 * 1 şeffaf img ekleyin

src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="

Bunu kullanarak buldum:

<img src="file://null">

bir istekte bulunmaz ve doğru bir şekilde doğrular.

Tarayıcılar yerel dosya sistemine erişimi engeller.

Ancak Chrome'daki konsol günlüğünde görüntülenen bir hata olabilir, örneğin:

Not allowed to load local resource: file://null/

Bu makaleye dayanarak gerçekten boş, geçerli ve son derece uyumlu bir SVG kullanın :

src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"

Herhangi bir SVG'nin yaptığı gibi varsayılan olarak 300x150px boyutunda olacaktır, ancak imgpratik uygulamada her durumda ihtiyacınız olacağı gibi , öğe varsayılan stillerinizde bununla çalışabilirsiniz .

Ben Blank'ın cevabından yola çıkarak, bunu w3 doğrulayıcısında doğrulamanın tek yolu şuydu:

<img src="/./.:0" alt="">`

Kişisel about:blank srcolarak imgöğenin opaklığını ayarlayarak kırık görüntü simgesi ile ilgileniyorum 0.

<img src="invis.gif" />

Burada invis.gif tek pikselli saydam bir giftir. Bu, gelecekteki tarayıcı sürümlerinde bozulmayacak ve 90'lardan beri eski tarayıcılarda çalışmaktadır.

png de çalışmalı ama testlerimde gif 43 bayt ve png 167 bayt oldu, böylece gif kazandı.

ps bir alt etiketi, onlar gibi doğrulayıcılar unutma.

Basitçe, Bunun gibi:

<img id="give_me_src"/>