Apa cara yang sah untuk memasukkan gambar tanpa src?


234

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?


4
Ini adalah pertanyaan yang relatif lama, tetapi perlu dipertimbangkan bahwa gambar tanpa src pada dasarnya tidak ada artinya dan itu sebabnya spesifikasi mengatakan bahwa gambar harus memiliki src yang menunjuk ke beberapa sumber daya yang tertanam di tempat pertama. Jika Anda berpikir tentang validitas dan / atau semantik, Anda jauh lebih baik dilayani dengan menghilangkan gambar seluruhnya dan menambahkannya setelah fakta, karena HTML tidak menyediakan cara untuk menentukan gambar placeholder yang akan diisi dengan data nanti.
BoltClock

1
Dalam menggunakan plugin jQuery lazy loading Mika Tuupola, ia menggunakan markup '<img class = "lazy" data-original = "img / example.jpg" width = "640" height = "480">', jadi dalam arti tertentu, Anda perlu menunjuk ke sumber, tetapi itu tidak harus dilakukan dengan atribut src.
iWillGetBetter

Anda dapat menggunakan elemen div sebagai ganti, silakan lihat ini => stackoverflow.com/a/5513934/1395101
Amin Ghaderi

Jawaban:


237

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.


16
Jawaban ini dapat menyebabkan firewall Anda memperingatkan Anda tentang mengakses port 0 misalnya. Atau dapat menyebabkan log keamanan server. Nasihat jawabannya about:blankmungkin adalah solusi yang lebih baik.
Florian Margaine

10
Ini menyebabkan ikon gambar yang rusak ditampilkan untuk saya. Adakah yang melihat ini? Saya menggunakan Firefox terbaru (27).
dmikester1

10
Ini juga gagal validator w3c: Nilai buruk //: 0 untuk atribut src pada elemen img: Host tidak valid: host kosong.
ysrb

Ini tidak berfungsi: Saya memiliki aplikasi ASP.NET MVC 4 yang berisi plugin galeri gambar yang disebut clearing. Plugin membuat gambar secara dinamis dan menempatkan //: 0 o src hingga gambar benar-benar diambil. Ini membuat tindakan indeks homecontroller saya dipanggil dua kali. Waspadalah.
jpgrassi

2
Di Firefox 38, pendekatan ini memicu onerrorpenangan gambar .
Nate Whittaker

221

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


14
Ide yang hebat! Namun bagi saya, ini membunuh elemen gambar - jika ada yang membutuhkan aspek lain dari imgelemen untuk ditampilkan misalnya latar belakang dan perbatasan, coba src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="yang diambil dari gif transparan 1px x 1px Saya membuat I Photoshop didorong melalui base64-image.de
user56reinstatemonica8

4
Anda mungkin ingin berpikir dua kali tentang inlining sumber daya Anda dengan Data URI: mobify.com/blog/data-uris-are-slow-on-mobile
shawnjan

1
Kelayakan opsi ini tergantung pada browser mana yang harus Anda dukung: caniuse.com/datauri
Jeff Clemens

6
Berikut PNG 1 piksel transparan:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=
Keavon

2
Url gambar transparan yang berfungsi untuk saya -data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
Vikram Rao

34

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,"


PL: Semua browser mengerti alt. Anda dapat menghilangkan ="", itu tersirat per spesifikasi HTML.


1
Tidak ada kesalahan HTML dengan cek validator W3C. Tidak ada permintaan yang tidak perlu. 👍 Tampaknya cara yang sah bagaimana melakukannya.
Kai Noack

Terbaik! Satu hal lagi, jika Anda ingin memvalidasi dalam srcset, gunakansrcset="data:,x"
Lucian Davidescu

18

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

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.


7
+1 Ini adalah jawaban terbaik. Jika sumber gambar diatur secara dinamis, seluruh elemen harus ditambahkan secara dinamis. Jika Anda tidak ingin itu terlihat sampai src diatur, saya tidak bisa memikirkan alasan bagus mengapa elemen tersebut harus ada sebelum itu.
Andrew Ensley

15

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


Itu tampak lebih bersih daripada membiarkan lapisan jaringan mengeluarkan kesalahan.
Denys Séguret

Setidaknya Anda yakin firewall bodoh tidak akan meminta izin untuk memanggil port 0 ...
Denys Séguret

1
Perlu disebutkan bahwa ini menampilkan ikon 'gambar rusak' di Chrome (dan mungkin juga peramban lainnya)
user56reinstatemonica8

1
Ini lebih buruk daripada yang saya kira - bahkan dengan doctype html5 tampaknya tidak berfungsi di Safari atau Chrome. Saya memiliki halaman pengujian yang akan memutar-mutar tipe Konten dan DOCTYPE dari sebuah halaman, dan sejauh ini favorit saya adalah: <img />- tag gambar tanpa atribut src. Ini tidak valid (jadi tidak ada gunanya menaruh tag alt kosong di sana, baik). Saya terus bermain dengannya dan akan memperbarui jawaban saya (atau menerobosnya) sesuai dengan itu.
Uberbrady

2
Saya mengambil halaman pengujian Anda dan memperbaruinya sehingga jauh lebih jelas ketika gambar tidak berfungsi dengan baik. Gambar kosong lama dimasukkan sebagai contoh "Selalu Berfungsi", serta deskripsi singkat tentang apa yang Anda lihat: memso.com/Test/BlankImage.html. Hal ini membuat saya menyadari bahwa gif data kosong yang valid adalah satu-satunya yang dapat digunakan kembali. pilihan untuk browser modern, selain dari gambar gif kosong lama (yang masih diperlukan untuk IE7 lama dan di bawah)
Mark Ormston

12

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.


1
Apakah ada argumen yang menentang pendekatan ini? Bagaimana cara melintasi peramban?
gemetar

18
Saya melihat Firefox dan Chrome membuat permintaan kedua saat menggunakan pendekatan ini, jadi saya tidak akan merekomendasikannya.
Marius

5
Firefox, Chrome membuat permintaan kedua, bahkan JMeter mem-parsing img src, yang menghasilkan pemuatan halaman rekursif (sampai kedalaman maksimum tercapai)
burna

1
Dalam FF Anda harus menekan tombol kembali Browser dua kali jika Anda ingin meninggalkan halaman karena url berubah secara misterius ..
Kalaschni

3
Ini jelas salah. Siapa pun yang kebetulan membaca komentar - JANGAN GUNAKAN INI
Shadow Wizard adalah Ear For You

11

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;
}

[ng-src = ''] {visibility: hidden; } jika Anda menggunakan arahan ng-src di angularjs
Ivan Paredes

1
Perhatikan, bahwa src harus diatur ke '', itu tidak boleh tidak ditentukan.
Vincent Hoch-Drei

Jika saya tidak salah, permintaan masih akan dilakukan
Nico

9

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="

1
Ini akan ditampilkan sebagai titik hitam di beberapa browser.
tomasz86

IE8 pasti, dan versi Firefox yang lebih lama sesuai dengan stackoverflow.com/questions/9126105/…
tomasz86

1
src ini data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==bekerja
Max Yari

9

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/

2
Mau jelaskan downvote? Perhatikan bahwa saya tidak merekomendasikan menggunakan metode ini hanya menyediakan kasus untuk diskusi. Dan itu memenuhi persyaratan dari pertanyaan untuk memvalidasi dengan benar dan tidak membuat permintaan tambahan.
tenkod

8

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.


Terima kasih telah memperbarui jawaban Anda, tetapi saya menduga kompatibilitasnya bahkan lebih buruk untuk ini, daripada solusi data-uri lainnya, mengingat Anda menggunakan svg yang tidak kompatibel hingga IE9. Untungnya, sudah lama sejak saya harus mendukung IE warisan tetapi masih relevan untuk beberapa orang.
funkylaundry

Tapi bukankah ini mengalami masalah yang sama seperti di artikel ini? dev.mobify.com/blog/data-uris-are-slow-on-mobile . Saya sedang memikirkan opsi <img src = "about: blank"> dengan css img [src = "about: blank"] {opacity: 0} solusi adalah yang terbaik. Atau, jika level selektor CSS itu tidak didukung di browser lama, cukup beri kelas img seperti "load-in", atau sesuatu. Lebih baik lagi, berikan kelasnya, gunakan JavaScript untuk menukar data-src, dan kemudian atur fungsi pemuatan ke gambar untuk membuatnya memudar saat dimuat. Anda juga dapat mengatur pemintal untuk ditampilkan saat sedang memuat. Terlihat sangat profesional.
Jordan Carter

@JordanCarter Tentu, jika kinerja rinci adalah masalah Sebagai sidenote, saya akan mengatakan visibility: hiddensedikit lebih pas daripada opacity: 0untuk penyeleksi atribut yang Anda sarankan.
mystrdat

6

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

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

Itu memvalidasi, tetapi menghasilkan gambar yang rusak di Firefox, bahkan dengan altatribut kosong .
James Wright

4

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


7
Nah, itu kotor!
mystrdat

@ mystrdat: Ingin menjelaskan mengapa itu kotor? Jawaban yang diterima, menggunakan "//: 0" masih memberi saya ikon gambar rusak ditambah permintaan aneh yang tidak pernah berakhir di Firefox. Alternatif png base64 pixel tunggal, juga dengan banyak suara, memberi saya kesulitan saat menggunakan <img> sebagai placeholder, baik dengan dan tanpa menentukan tinggi dan lebar. Ini adalah cara terbersih yang saya temukan untuk mencapai tujuan saya tanpa permintaan yang tidak perlu dan melewati semua serat dan validasi.
Miguel

Semua solusi di atas sangat konyol yang diterima termasuk, saya akan membuat balasan baru setelah saya mendapatkan lebih banyak waktu.
mystrdat

@ mystrdat: Saya masih senang mengetahui apa yang Anda katakan tentang ini?
funkylaundry

1
@funkylaundry Saya minta maaf karena membuat klaim besar dan menghilang, memposting jawaban saya sekarang. Saya juga mengakui bahwa saya belum memperhatikan solusi Data URI lainnya sebelumnya, yang saya setujui, tapi saya percaya saya lebih unggul dalam sintaksis.
mystrdat

4
<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.


-1

Cukup, Sukai ini:

<img id="give_me_src"/>

4
Bukan ide yang baik sesuai dengan spesifikasi : Atribut src harus ada, dan harus mengandung URL yang valid ...
Michael Litvin

1
Mungkin ini bekerja dengan baik di chrome, tetapi AKAN melempar kesalahan dalam validasi html dan itu bukan html valid W3 ...
EhsanT
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.