मैं बेस 64 के साथ छवि स्रोत कैसे सेट कर सकता हूं

93

मैं छवि स्रोत को बेस 64 स्रोत पर सेट करना चाहता हूं लेकिन यह काम नहीं करता है:

<img id="img" src="" />

जावास्क्रिप्ट

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="

javascript base64

— पोपेल
स्रोत

9

यदि आप बेस 64 स्ट्रिंग में लाइन ब्रेक को हटाते हैं तो यह काम करता है। फिडेल अपडेट किया गया।

— एड्रियानो रेपेट्टी

136

setAttributeइसके बजाय प्रयोग करके देखें :

document.getElementById('img')
    .setAttribute(
        'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
    );

वास्तविक उत्तर: (और सुनिश्चित करें कि आप बेस -64 में लाइन-ब्रेक को हटा दें।)

— केविन बाउचर
स्रोत

thx, मैं 10 मिनट में स्वीकार करूंगा, क्यों सेट बेहतर है?

— पोपेल

@ पॉपरेल मुझे नहीं लगता कि यह मायने रखता है, लेकिन आपके फिडेल को ठीक करने का मेरा पहला प्रयास था setAttribute। उसके बाद यह विफल हो गया कि मैंने बेस 64 एन्कोडिंग में लाइन-ब्रेक को देखा। (जब से मैं एक जवाब प्रस्तुत करने के लिए दौड़ रहा था, मैंने src=लाइन-ब्रेक को ठीक करने के बाद इसके साथ प्रयास नहीं किया ।)

— केविन बाउचर

26

यदि आप बेस 64 से छवि सेट करने के लिए jQuery का उपयोग करना पसंद करते हैं:

$("#img").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');

— फारिस ज़सीना
स्रोत

5

@TruthSerum हम इसका उपयोग नहीं कर रहे हैं, क्योंकि हम एक प्रतिक्रिया स्टैक पर स्विच करते हैं। लेकिन मज़े के लिए, क्या आपके पास अपने दावे को साबित करने के लिए सांख्यिकीय सबूत हैं? क्या आप वास्तव में सोचते हैं कि jQuery का उपयोग करके कोई विरासत वेब ऐप नहीं हैं? आपकी टिप्पणी आपकी व्यक्तिगत राय पर आधारित है, और वास्तव में मेरे व्यक्तिगत समय की बर्बादी है। यदि आप परियोजना की जांच करते हैं, तो भी यह बनाए रखा जाता है और इसका एक विशाल अनुयायी आधार है। github.com/jquery/jquery/commits/master

— Faris Zacina

5

इसके अलावा @TruthSerum यहां कुछ आँकड़े हैं, क्योंकि आपको अपनी टिप्पणी पोस्ट करने से पहले उन्हें जांचने का मौका नहीं मिला: google.com/trends/…

— Faris Zacina

डोम को अपडेट करने के propबजाय इन दिनों का उपयोग किया जाना चाहिए attr। attrलोडिंग पर मूल पृष्ठ स्थिति को संदर्भित करता है।

— एंटोनचेनिंग

6

img = new Image();
img.src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
img.outerHTML;
"<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">"

— zzart
स्रोत

3

आपकी समस्या cr (गाड़ी वापसी) है

http://jsfiddle.net/NT9KB/210/

आप उपयोग कर सकते हैं:

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

— माटीस डेमोंटे
स्रोत

इसका समाधान क्या है?

— एएचएच

इसका समाधान बेस 64 से लाइन ब्रेक (गाड़ी का रिटर्न) निकालना है।

— केविन बाउचर