कोई src वाली छवि को शामिल करने का वैध तरीका क्या है?

Question

मेरी एक छवि है कि मैं डायनामिक रूप से एक src के साथ बाद में जावास्क्रिप्ट के साथ पॉपुलेट करूंगा लेकिन आसानी से मैं चाहता हूं कि छवि टैग पगेलोड पर मौजूद हो लेकिन बस कुछ भी प्रदर्शित न हो। मुझे पता <img src='' />है कि अमान्य है इसलिए ऐसा करने का सबसे अच्छा तरीका क्या है?

Comments

यह एक अपेक्षाकृत पुराना सवाल है, लेकिन यह विचार करने योग्य है कि बिना src वाली कोई छवि अनिवार्य रूप से व्यर्थ है और इसीलिए कल्पना कहती है कि छवि के पास पहले से कुछ एम्बेडेड संसाधन की ओर संकेत करने वाला src होना चाहिए । यदि आप वैधता और / या शब्दार्थ के बारे में सोच रहे हैं, तो आप पूरी तरह से छवि को पूरी तरह से छोड़ कर और इस तथ्य के बाद इसे जोड़कर बेहतर सेवा कर रहे हैं, क्योंकि HTML एक प्लेसहोल्डर छवि को निर्दिष्ट करने का एक तरीका प्रदान नहीं करता है जो बाद में डेटा के साथ आबाद हो जाएगा।

— BoltClock

Mika Tuupola के आलसी लोडिंग jQuery प्लगइन का उपयोग करने में, यह मार्कअप का उपयोग करता है '<img class = "lazy" data-original = "img / example.jpg" width = "640" height = "480">', इसलिए एक अर्थ में, आप एक स्रोत को इंगित करने की आवश्यकता है, लेकिन यह src विशेषता के साथ नहीं किया जाना चाहिए।

— iWillGetBetter

आप इसके बजाय div एलिमेंट का उपयोग कर सकते हैं कृपया इसे देखें => stackoverflow.com/a/5513934/1395101

— अमीन घुदेरी

Answer 1

हालांकि किसी छवि के स्रोत को छोड़ने का कोई वैध तरीका नहीं है, लेकिन ऐसे स्रोत हैं जो सर्वर हिट का कारण नहीं बनेंगे। मैंने हाल ही में iframeएस के साथ एक समान मुद्दा रखा था और //:0सबसे अच्छा विकल्प होने के लिए निर्धारित किया था। सच में नहीं!

के साथ शुरू //(छोड़ते हुए प्रोटोकॉल) का कारण बनता है वर्तमान पृष्ठ के प्रोटोकॉल का इस्तेमाल किया जाना है, को रोकने HTTPS पृष्ठों में "असुरक्षित सामग्री" चेतावनी। होस्ट नाम को छोड़ना आवश्यक नहीं है, लेकिन इसे छोटा बनाता है। अंत में, :0यह सुनिश्चित करता है कि सर्वर अनुरोध नहीं किया जा सकता है (यह एक मान्य पोर्ट नहीं है, युक्ति के अनुसार)।

यह एकमात्र ऐसा URL है, जो मुझे मिला, किसी भी ब्राउज़र में कोई सर्वर हिट या त्रुटि संदेश नहीं मिला। सामान्य विकल्प - javascript:void(0)- IE7 में एक "असुरक्षित सामग्री" चेतावनी का कारण होगा यदि HTTPS के माध्यम से सेवा की गई पृष्ठ पर उपयोग किया जाता है। किसी अन्य पोर्ट ने अमान्य पते के लिए भी सर्वर कनेक्शन का प्रयास किया। (कुछ ब्राउज़र केवल अमान्य अनुरोध करेंगे और उनके समय समाप्त होने तक प्रतीक्षा करेंगे।)

यह क्रोम, सफारी 5, एफएफ 3.6 और IE 6/7/8 में परीक्षण किया गया था, लेकिन मैं इसे किसी भी ब्राउज़र में काम करने की उम्मीद करूंगा, क्योंकि यह नेटवर्क परत होना चाहिए जो किसी भी अनुरोध को मारता है।

Comments

यह उत्तर आपके फ़ायरवॉल को उदाहरण के लिए पोर्ट 0 तक पहुँचने के बारे में आगाह कर सकता है। या यह सर्वर सुरक्षा लॉग का कारण बन सकता है। सलाह देने वाला उत्तर about:blankशायद एक बेहतर उपाय है।

— फ्लोरियन मार्गाइन

यह मेरे लिए प्रदर्शित करने के लिए एक टूटी हुई छवि आइकन का कारण बन रहा है। यह देखकर कोई और? मैं नवीनतम फ़ायरफ़ॉक्स (27) का उपयोग कर रहा हूं।

— dmikester1 20

यह w3c सत्यापनकर्ता को भी विफल करता है: तत्व img पर विशेषता src के लिए खराब मान //: 0: अमान्य होस्ट: खाली होस्ट।

— ysrb

यह काम नहीं करता है: मेरे पास ASP.NET MVC 4 अनुप्रयोग है जिसमें समाशोधन नामक एक छवि गैलरी प्लगइन है। प्लगइन गतिशील रूप से छवियों को बनाता है और यह //: 0 को src को पूरा करता है जब तक कि छवि वास्तव में नहीं आती है। यह मेरे होमकंट्रोलर की सूचकांक कार्रवाई को दो बार कहा जा रहा था। तो खबरदार।

— 15

फ़ायरफ़ॉक्स 38 में, यह दृष्टिकोण छवि के onerrorहैंडलर को ट्रिगर करता है ।

— नैट व्हिटकर

Answer 2

एक अन्य विकल्प खाली छवि को एम्बेड करना है। आपके उद्देश्य के अनुरूप कोई भी छवि, लेकिन निम्न उदाहरण एक GIF को एन्कोड करता है जो केवल 26 बाइट्स है - http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever से

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

नीचे टिप्पणी के आधार पर संपादित करें:

बेशक, आपको अपने ब्राउज़र समर्थन आवश्यकताओं पर विचार करना चाहिए। IE7 या उससे कम के लिए कोई समर्थन उल्लेखनीय नहीं है। http://caniuse.com/datauri

Comments

महान विचार! हालाँकि मेरे लिए, यह छवि तत्व को मारता है - अगर किसी को imgपृष्ठभूमि और सीमा जैसे उदाहरण दिखाने के लिए तत्व के अन्य पहलुओं की आवश्यकता होती है , तो कोशिश करें src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="जो 1px x 1px पारदर्शी gif से लिया गया है मैंने बनाया I Photoshop को बेस 64-image.de के

— user56

आप डेटा यूआरआई के साथ अपने संसाधनों को स्थापित करने के बारे में दो बार सोचना चाहते हैं: mobify.com/blog/data-uris-are-slow-on-mobile

— shawnjan

इस विकल्प की व्यवहार्यता इस बात पर निर्भर करती है कि आपको किन ब्राउज़र का समर्थन करना चाहिए: caniuse.com/datauri

— जेफ क्लेमेंस

यहाँ एक पारदर्शी 1 पिक्सेल पीएनजी है:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=

— केवॉन

मेरे लिए काम करने वाली पारदर्शी छवि url -data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

— विक्रम राव

Answer 3

इन दिनों एक खाली img src के लिए IMHO सबसे अच्छा छोटा, समझदार और वैध तरीका इस प्रकार है:

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

दूसरा उदाहरण "वैकल्पिक पाठ" (क्रोम और IE में प्लस टूटी-छवि-आइकन) को प्रदर्शित करता है।

"data:,"एक वैध यूआरआई है। एक खाली मीडिया-प्रकार की चूक text/plain। तो यह एक खाली पाठ फ़ाइल का प्रतिनिधित्व करता है और इसके बराबर है"data:text/plain,"

---

OT: सभी ब्राउज़र सादे समझते हैं alt। आप छोड़ सकते हैं ="", यह प्रति HTML कल्पना है।

Comments

W3C सत्यापनकर्ता जांच के साथ कोई HTML त्रुटि नहीं। कोई अनावश्यक अनुरोध नहीं। To यह कैसे करना है मान्य तरीका लगता है।

— काई नैक

श्रेष्ठ! एक और बात, यदि आप चाहते हैं कि इसे एक श्रोकेट में मान्य किया जाए, तो उपयोग करेंsrcset="data:,x"

— Lucian Davidescu

Answer 4

मैं गतिशील रूप से तत्वों को जोड़ने की सलाह देता हूं, और अगर jQuery या अन्य जावास्क्रिप्ट लाइब्रेरी का उपयोग कर रहा है, तो यह काफी सरल है:

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

भी देखो prependऔर append। अन्यथा यदि आपके पास ऐसा कोई छवि टैग है, और आप इसे वैध बनाना चाहते हैं, तो आप एक डमी छवि का उपयोग करने पर विचार कर सकते हैं, जैसे कि 1px पारदर्शी जीआईएफ या पीएनजी।

Comments

+1 यह सबसे अच्छा जवाब है। यदि छवि स्रोत को गतिशील रूप से वैसे भी सेट किया जा रहा है, तो पूरे तत्व को गतिशील रूप से जोड़ा जाना चाहिए। यदि आप यह नहीं चाहते हैं कि src सेट होने तक दिखाई न दे, तो मैं किसी भी अच्छे कारण के बारे में नहीं सोच सकता कि तत्व इससे पहले क्यों होना चाहिए।

— एंड्रयू एनस्ले

Answer 5

मैंने कुछ समय में ऐसा नहीं किया है, लेकिन मुझे एक बार इसी बात से गुजरना पड़ा।

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

क्या मेरा पसंदीदा - वह //:0है जिसका अर्थ है कि आप पोर्ट शून्य (tcpmux पोर्ट?) पर मूल सर्वर से HTTP / HTTPS कनेक्शन बनाने की कोशिश करेंगे - जो शायद हानिरहित है, लेकिन मैं वैसे भी नहीं करूँगा। बिल्ली, ब्राउज़र पोर्ट शून्य देख सकता है और अनुरोध भी नहीं भेज सकता है। लेकिन मैं अभी भी बल्कि इसे उस तरह से निर्दिष्ट नहीं किया जा सकता है जब कि शायद आपका मतलब नहीं है।

वैसे भी, about:blankमेरे द्वारा परीक्षण किए गए सभी ब्राउज़रों में रेंडरिंग वास्तव में बहुत तेज़ है। मैंने इसे W3C सत्यापनकर्ता में फेंक दिया और इसकी शिकायत नहीं की, इसलिए यह मान्य भी हो सकता है।

संपादित करें : ऐसा मत करो; यह सभी ब्राउज़रों पर काम नहीं करता है (यह इस उत्तर के लिए टिप्पणियों में इंगित की गई 'टूटी हुई छवि' आइकन दिखाएगा)। <img src='data:...नीचे दिए गए घोल का प्रयोग करें । या यदि आप वैधता के बारे में परवाह नहीं करते हैं, लेकिन फिर भी अपने सर्वर के लिए शानदार अनुरोधों से बचना चाहते हैं, तो आप <img alt="" />बिना किसी src विशेषता के साथ कर सकते हैं । लेकिन वह यह है कि अवैध एचटीएमएल ताकि ध्यान से चुनें।

टेस्ट पेज विभिन्न तरीकों का एक पूरा गुच्छा दिखा रहा है: http://desk.nu/blank_image.php - सभी प्रकार के विभिन्न सिद्धांतों और सामग्री-प्रकारों के साथ परोसा जाता है। - जैसा कि नीचे टिप्पणी में कहा गया है, मार्क ऑर्मस्टन के नए परीक्षण पृष्ठ का उपयोग करें: http://memso.com/Test/BlankIfage.html

Comments

नेटवर्क परत को एक त्रुटि जारी करने की तुलना में यह क्लीनर लगता है।

— डेनिस सेगुरेट

कम से कम आपको यकीन है कि एक बेवकूफ फ़ायरवॉल पोर्ट 0 को कॉल करने की अनुमति नहीं मांगेगा ...

— Denys Séguret

यह ध्यान देने योग्य है कि यह क्रोम पर 'टूटी हुई छवि' आइकन (और शायद अन्य ब्राउज़र भी) प्रदर्शित करता है

— user56reinstatemonica8

यह मैंने जितना सोचा था उससे भी बदतर है - html5 सिद्धांत के साथ भी यह सफारी या क्रोम में काम नहीं करता है। मेरे पास एक परीक्षण पृष्ठ है जो किसी पृष्ठ की सामग्री-प्रकार और सिद्धांत को दोहराएगा, और अब तक मेरा पसंदीदा है: <img />- src विशेषता के बिना एक छवि टैग । यह मान्य नहीं है (इसलिए वहां कोई भी रिक्त टैग पूरी तरह से डालने का कोई मतलब नहीं है)। मैं इसके साथ खेलना जारी रख रहा हूं और अपने उत्तर (या हड़ताल के माध्यम से) को तदनुसार अपडेट करूंगा।

— Uberbrady

मैंने आपका परीक्षण पृष्ठ लिया और इसे अपडेट किया तो यह तब और अधिक स्पष्ट है जब छवियां ठीक से काम नहीं करती हैं। पुरानी रिक्त छवि को "हमेशा काम करता है" उदाहरण के रूप में शामिल किया गया है, साथ ही साथ आप जो भी देख रहे हैं उसका एक संक्षिप्त विवरण: memso.com/Test/BlankImage.html इससे मुझे एहसास होता है कि वैध रिक्त डेटा gif एकमात्र पुन: प्रयोज्य है आधुनिक ब्राउज़रों के लिए विकल्प, पुरानी खाली gif छवि के अलावा (जो अभी भी पुराने IE7 और नीचे के लिए आवश्यक है)

— मार्क Ormston

Answer 6

जैसा कि टिप्पणियों में लिखा गया है, यह तरीका गलत है।

मुझे यह उत्तर पहले नहीं मिला, लेकिन डब्लू 3 स्पेक्स के वैध खाली srcटैग की रिकॉर्डिंग एक एंकर लिंक होगी #।

उदाहरण: src="#",src="#empty"

पृष्ठ सफलतापूर्वक पुष्टि करता है और कोई अतिरिक्त अनुरोध नहीं किया जाता है।

Comments

क्या इस दृष्टिकोण के खिलाफ कोई तर्क हैं? यह ब्राउज़रों में कैसे है?

— कांपना

मैंने देखा है कि फ़ायरफ़ॉक्स और क्रोम दोनों इस दृष्टिकोण का उपयोग करते समय एक दूसरा अनुरोध करते हैं, इसलिए मैं इसकी अनुशंसा नहीं करूंगा।

— मारीस

फ़ायरफ़ॉक्स, क्रोम एक दूसरा अनुरोध करते हैं, यहां तक ​​कि JMeter img src को पार्स करता है, जिसके परिणामस्वरूप पुनरावर्ती पृष्ठ लोड होता है (अधिकतम गहराई तक पहुंचने तक)

— Burna

FF में आपको ब्राउजर के बैक बटन पर दो बार मारना होगा यदि आप पेज को छोड़ना चाहते हैं क्योंकि url रहस्यमय तरीके से बदल जाता है ..

— कलासंची

यह सादा गलत है। जो भी टिप्पणी पढ़ने के लिए होता है - वह इस का उपयोग न करें

— छाया जादूगर

Answer 7

मैंने पाया कि बस एक खाली स्ट्रिंग के लिए src सेट करना और टूटी हुई छवि आइकन को छिपाने के लिए अपने CSS में एक नियम जोड़ना ठीक काम करता है।

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

Comments

[एनजी- src = ''] {दृश्यता: छिपी; } अगर आप angularjs में ng-src निर्देश का उपयोग कर रहे हैं

— इवान Paredes

ध्यान दें, कि src को सेट किया ''जाना चाहिए, यह अपरिभाषित नहीं होना चाहिए।

— विन्सेन्ट होच-

अगर मैं गलत नहीं हूं, तो एक अनुरोध अभी भी किया जाएगा

— निको

Answer 8

यदि आप src विशेषता को रखते हैं तो खाली ब्राउज़र वर्तमान पृष्ठ url के लिए अनुरोध भेजेगा हमेशा src विशेषता में 1 * 1 पारदर्शी img जोड़ें अगर आपको कोई url नहीं चाहिए

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

Comments

इसे कुछ ब्राउज़रों में एक ब्लैक डॉट के रूप में प्रदर्शित किया जाएगा।

— tomasz86

IE8 सुनिश्चित करने के लिए, और stackoverflow.com/questions/9126105/… के

— tomasz86

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==हालांकि इस src ने काम किया

— मैक्स यारी

Answer 9

मैंने पाया है कि उपयोग करना:

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

अनुरोध नहीं करेगा और सही तरीके से मान्य होगा।

ब्राउज़र बस स्थानीय फ़ाइल सिस्टम तक पहुँच को रोक देगा।

लेकिन उदाहरण के लिए Chrome में कंसोल लॉग में प्रदर्शित एक त्रुटि हो सकती है:

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

Comments

नीचे की व्याख्या करने के लिए देखभाल? ध्यान दें कि मैं इस विधि का उपयोग करने की अनुशंसा नहीं कर रहा हूं केवल चर्चा के लिए एक मामला प्रदान कर रहा हूं। और यह सवाल से आवश्यकताओं को सही ढंग से मान्य करने और अतिरिक्त अनुरोध नहीं करने के लिए संतोषजनक है।

— दसकोड

Answer 10

इस लेख के आधार पर वास्तव में रिक्त, मान्य और उच्च संगत SVG का उपयोग करें :

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

यह आकार में 300x150px तक डिफ़ॉल्ट होगा जैसा कोई एसवीजी करता है, लेकिन आप अपने imgतत्व डिफ़ॉल्ट शैलियों में उस के साथ काम कर सकते हैं, जैसा कि संभवतः आपको व्यावहारिक कार्यान्वयन में किसी भी मामले में आवश्यकता होगी।

Comments

आपके उत्तर को अपडेट करने के लिए धन्यवाद, लेकिन मुझे संदेह है कि संगतता इसके लिए और भी बदतर है, अन्य डेटा-यूआरआई समाधान की तुलना में, यह देखते हुए कि आप svg का उपयोग करते हैं जो IE9 तक संगत नहीं था। सौभाग्य से, यह एक समय हो गया है क्योंकि मुझे विरासत IE का समर्थन करना था लेकिन यह अभी भी कुछ लोगों के लिए प्रासंगिक है।

— फंकाइलैन्डरी

लेकिन क्या यह इस लेख में उन मुद्दों के समान नहीं है? dev.mobify.com/blog/data-uris-are-slow-on-mobile । मैं सोच रहा हूँ <img src = "के बारे में: रिक्त"> सीएसएस के साथ विकल्प img [src = "के बारे में: रिक्त"] {अस्पष्टता: 0} समाधान सबसे अच्छा है। या, यदि सीएसएस चयनकर्ता का वह स्तर पुराने ब्राउज़रों में समर्थित नहीं है, तो बस img टैग को "लोड-इन", या कुछ और की तरह एक वर्ग दें। बेहतर अभी तक, इसे कक्षा दें, डेटा-src को स्वैप करने के लिए जावास्क्रिप्ट का उपयोग करें, और फिर लोड पर इसे फीका करने के लिए छवि को लोड फ़ंक्शन सेट करें। आप इसे लोड करते समय दिखाए जाने वाले स्पिनर को भी सेट कर सकते हैं। वास्तव में पेशेवर लगता है।

— जॉर्डन कार्टर

@JordanCarter ज़रूर, अगर विस्तृत प्रदर्शन एक चिंता का विषय है। एक विचार के रूप में, मैं कहूंगा कि आपके द्वारा सुझाए जा रहे विशेषता चयनकर्ताओं की visibility: hiddenतुलना में थोड़ा अधिक उपयुक्त है opacity: 0।

— 10

Answer 11

बेन ब्लैंक के उत्तर का निर्माण, मुझे w3 सत्यापनकर्ता में मान्य करने का एकमात्र तरीका ऐसा था:

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

Comments

यह मान्य है, लेकिन यह फ़ायरफ़ॉक्स में टूटी हुई छवि का परिणाम है, यहां तक ​​कि एक खाली altविशेषता के साथ भी ।

— जेम्स राइट

Answer 12

मैं व्यक्तिगत रूप से एक का उपयोग करता हूं about:blank srcऔर टूटे हुए छवि आइकन के साथ imgतत्व की अस्पष्टता को सेट करके व्यवहार करता हूं 0।

Comments

अब यह गंदा है!

— रहस्योदय

@ मिस्टर्डैट: यह गंदे क्यों है विस्तृत करने के लिए देखभाल? स्वीकृत जवाब, "//: 0" का उपयोग करके मुझे अभी भी टूटी हुई छवि आइकन दी गई है और फ़ायरफ़ॉक्स पर एक अजीब कभी न खत्म होने वाला अनुरोध है। एकल पिक्सेल बेस 64 पीएनजी विकल्प, बहुत सारे वोटों के साथ, मुझे प्लेसहोल्डर के रूप में <img> का उपयोग करते समय परेशानी हुई, दोनों ऊंचाई और चौड़ाई को निर्दिष्ट किए बिना। यह सबसे साफ तरीका है जिसे मैंने अपने लक्ष्य को बिना किसी अनावश्यक अनुरोध के प्राप्त करने और सभी लिंटर और सत्यापन को पारित करने के लिए पाया।

— मिगेल

उपरोक्त सभी समाधान बहुत ही मूर्खतापूर्ण हैं जिनमें से एक को शामिल किया गया है, मैं कुछ और समय प्राप्त करने के बाद एक नया उत्तर दूंगा।

— 23

@ मिस्टर्डैट: मुझे यह जानकर खुशी होगी कि इस बारे में आपका क्या कहना है?

— फंकाइलेरी

@funkylaundry मैं बड़े दावे करने और गायब होने के लिए माफी मांगता हूं, अब अपना जवाब पोस्ट किया है। मैं यह भी स्वीकार करता हूं कि मैंने पहले अन्य डेटा यूआरआई समाधानों पर ध्यान नहीं दिया है, जिससे मैं सहमत हूं, लेकिन मेरा मानना ​​है कि मेरा सिंटैक्स वैसे भी बेहतर है।

— ०१:०३ पर ०१/३३

Answer 13

<img src="invis.gif" />

जहाँ invis.gif एक एकल पिक्सेल पारदर्शी gif है। यह भविष्य के ब्राउज़र संस्करणों में नहीं टूटेगा और 90 के दशक से विरासत के ब्राउज़रों में काम कर रहा है।

png को भी काम करना चाहिए लेकिन मेरे परीक्षणों में, gif 43 बाइट्स था और png 167 बाइट्स था इसलिए gif जीता।

पीएस एक कुल टैग नहीं भूल जाते हैं, उनके जैसे सत्यापनकर्ता भी।

Answer 14

बस, इस तरह:

<img id="give_me_src"/>

Comments

युक्ति के अनुसार अच्छा विचार नहीं : src विशेषता मौजूद होनी चाहिए, और इसमें एक मान्य URL होना चाहिए ...

— माइकल लिट्विन

हो सकता है कि यह अच्छी तरह से क्रोम में काम करता है, लेकिन यह होगा HTML सत्यापन में त्रुटियों फेंक और यह एक डब्ल्यू 3 मान्य एचटीएमएल नहीं है ...

— EhsanT