Apa cara yang sah untuk memasukkan gambar tanpa src?

Saya memiliki gambar yang saya akan secara dinamis mengisi dengan src nanti dengan javascript tetapi untuk memudahkan saya ingin tag gambar ada di pageload tetapi tidak menampilkan apa-apa. Saya tahu <img src='' />tidak valid, jadi apa cara terbaik untuk melakukan ini?

Meskipun tidak ada cara yang valid untuk menghilangkan sumber gambar ini, ada yang sumber yang tidak akan menyebabkan server yang hits. Saya baru-baru ini memiliki masalah yang sama dengan iframes dan bertekad //:0untuk menjadi pilihan terbaik. Tidak benar-benar!

Dimulai dengan //(menghilangkan protokol) menyebabkan protokol halaman saat ini digunakan, mencegah peringatan "konten tidak aman" di halaman HTTPS. Melewati nama host tidak perlu, tetapi membuatnya lebih pendek. Akhirnya, porta :0memastikan bahwa permintaan server tidak dapat dibuat (ini bukan port yang valid, sesuai spesifikasi).

Ini adalah satu-satunya URL yang saya temukan tidak menyebabkan hit server atau pesan kesalahan di browser apa pun. Pilihan biasa - javascript:void(0)- akan menyebabkan peringatan "konten tidak aman" di IE7 jika digunakan pada halaman yang disajikan melalui HTTPS. Port lain apa pun yang menyebabkan koneksi server dicoba, bahkan untuk alamat yang tidak valid. (Beberapa browser hanya akan membuat permintaan yang tidak valid dan menunggu mereka untuk waktu habis.)

Ini diuji di Chrome, Safari 5, FF 3.6, dan IE 6/7/8, tapi saya berharap itu berfungsi di browser apa pun, karena itu harus menjadi lapisan jaringan yang membunuh semua permintaan percobaan.

Pilihan lain adalah menyematkan gambar kosong. Gambar apa pun yang sesuai dengan tujuan Anda akan dilakukan, tetapi contoh berikut ini menyandikan GIF yang hanya 26 byte - dari http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

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

Edit berdasarkan komentar di bawah ini:

Tentu saja, Anda harus mempertimbangkan persyaratan dukungan browser Anda. Tidak ada dukungan untuk IE7 atau kurang penting. http://caniuse.com/datauri

Sekarang ini IMHO cara terbaik, pendek, waras & valid untuk img src kosong adalah seperti ini:

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

Contoh kedua menampilkan "Teks Alternatif" (ditambah ikon gambar-rusak di Chrome dan IE).

"data:,"adalah URI yang valid. Jenis media yang kosong default ke text/plain. Jadi itu merupakan file teks kosong dan setara dengan"data:text/plain,"

Saya sarankan menambahkan elemen secara dinamis, dan jika menggunakan jQuery atau perpustakaan JavaScript lainnya, itu cukup sederhana:

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

juga lihat prependdan append. Kalau tidak, jika Anda memiliki tag gambar seperti itu, dan Anda ingin membuatnya valid, maka Anda dapat mempertimbangkan untuk menggunakan gambar dummy, seperti gif atau png transparan 1px.

Saya belum melakukan ini dalam beberapa saat, tetapi saya harus melalui hal yang sama sekali.

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

Apakah favorit saya - yang //:0menyiratkan bahwa Anda akan mencoba membuat koneksi HTTP / HTTPS ke server asal pada port nol (port tcpmux?) - yang mungkin tidak berbahaya, tapi saya lebih suka tidak melakukan apa pun. Heck, browser mungkin melihat port nol dan bahkan tidak mengirim permintaan. Tapi saya masih lebih suka tidak ditentukan seperti itu padahal itu mungkin bukan yang Anda maksud.

Bagaimanapun, rendering about:blanksebenarnya sangat cepat di semua browser yang saya uji. Saya baru saja melemparkannya ke validator W3C dan tidak mengeluh, jadi mungkin bahkan valid.

Sunting : Jangan lakukan itu; itu tidak berfungsi di semua browser (itu akan menampilkan ikon 'gambar rusak' seperti yang ditunjukkan dalam komentar untuk jawaban ini). Gunakan <img src='data:...solusi di bawah ini. Atau jika Anda tidak peduli tentang validitas, tetapi masih ingin menghindari permintaan berlebihan ke server Anda, Anda dapat melakukannya <img alt="" />tanpa atribut src. Tapi itu INVALID HTML jadi pilihlah dengan hati-hati.

Laman Uji menampilkan sejumlah metode berbeda: http://desk.nu/blank_image.php - disajikan dengan semua jenis doktipe dan tipe konten yang berbeda. - sebagaimana disebutkan dalam komentar di bawah ini, gunakan halaman uji baru Mark Ormston di: http://memso.com/Test/BlankImage.html

Seperti yang ditulis dalam komentar, metode ini salah.

Saya tidak menemukan jawaban ini sebelumnya, tetapi menurut W3 Specssrc tag kosong yang valid akan menjadi tautan jangkar #.

Contoh: src="#",src="#empty"

Halaman berhasil divalidasi dan tidak ada permintaan tambahan yang dibuat.

Saya menemukan bahwa hanya mengatur src ke string kosong dan menambahkan aturan ke CSS Anda untuk menyembunyikan ikon gambar yang rusak bekerja dengan baik.

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

jika Anda membiarkan src atribut kosong, peramban akan mengirim permintaan ke url halaman saat ini, selalu tambahkan 1 * 1 img transparan dalam atribut src jika tidak ingin ada url

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

Saya menemukan bahwa menggunakan:

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

tidak akan membuat permintaan dan memvalidasi dengan benar.

Browser hanya akan memblokir akses ke sistem file lokal.

Tetapi mungkin ada kesalahan yang ditampilkan di konsol log di Chrome misalnya:

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

Gunakan SVG yang benar-benar kosong, valid, dan sangat kompatibel, berdasarkan artikel ini :

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

Ini akan secara default dalam ukuran 300x150px seperti halnya SVG, tetapi Anda dapat bekerja dengan itu dalam imggaya default elemen Anda , karena Anda mungkin perlu dalam hal apapun dalam implementasi praktis.

Membangun dari jawaban Ben Blank, satu-satunya cara saya mendapatkan ini untuk memvalidasi di validator w3 adalah seperti:

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

Saya pribadi menggunakan about:blank srcdan menangani ikon gambar yang rusak dengan mengatur opacity imgelemen ke 0.

<img src="invis.gif" />

Di mana invis.gif adalah satu piksel transparan gif. Ini tidak akan rusak di versi peramban di masa mendatang dan telah berfungsi di peramban lawas sejak tahun 90-an.

png harus bekerja juga, tetapi dalam pengujian saya, gif adalah 43 byte dan png adalah 167 byte sehingga gif menang.

ps jangan lupa tag alt, validator juga menyukainya.

Cukup, Sukai ini:

<img id="give_me_src"/>