ฉันจะตั้งค่าแหล่งที่มาของภาพด้วย base64 ได้อย่างไร

96

ฉันต้องการตั้งค่าแหล่งที่มาของภาพเป็นแหล่งที่มา base64 แต่ไม่ได้ผล:

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

JavaScript

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

javascript base64

— เพลงป๊อป
แหล่งที่มา

9

ใช้งานได้ถ้าคุณลบตัวแบ่งบรรทัดในสตริง base64 อัปเดตซอแล้ว

— Adriano Repetti

140

ลองใช้setAttributeแทน:

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

คำตอบที่แท้จริง: (และอย่าลืมลบเส้นแบ่งใน base64 ออก)

— เควินบูเชอร์
แหล่งที่มา

ขอบคุณฉันจะยอมรับใน 10 นาทีทำไม setAttribute ถึงดีกว่า?

— poppel

@poppel ผมไม่คิดว่ามันเป็นเรื่องสำคัญ setAttributeแต่ความพยายามครั้งแรกของฉันที่จะแก้ไขไวโอลินของคุณคือการใช้งาน หลังจากนั้นล้มเหลวที่ฉันสังเกตเห็นการแบ่งบรรทัดในการเข้ารหัส base64 (เนื่องจากฉันกำลังเร่งหาคำตอบที่ส่งมาฉันจึงไม่ได้ลองทำsrc=หลังจากแก้ไขการแบ่งบรรทัด)

— Kevin Boucher

26

ในกรณีที่คุณต้องการใช้ jQuery เพื่อตั้งค่ารูปภาพจาก Base64:

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

— ฟาริสซาซิน่า
แหล่งที่มา

5

@TruthSerum เราไม่ได้ใช้มันเนื่องจากเราเปลี่ยนไปใช้ React stack แต่เพื่อความสนุกสนานคุณมีหลักฐานทางสถิติเพื่อพิสูจน์คำกล่าวอ้างของคุณหรือไม่? คุณคิดว่าไม่มีเว็บแอปแบบเดิมที่ใช้ jQuery หรือไม่? ความคิดเห็นของคุณมาจากความคิดเห็นส่วนตัวของคุณและเสียเวลาส่วนตัวของฉันจริงๆ นอกจากนี้หากคุณตรวจสอบโครงการก็ยังคงได้รับการดูแลและมีฐานผู้ติดตามจำนวนมาก github.com/jquery/jquery/commits/master

— Faris Zacina

5

นอกจากนี้ @TruthSerum นี่คือสถิติบางส่วนเนื่องจากคุณไม่ได้มีโอกาสตรวจสอบก่อนโพสต์ความคิดเห็นของคุณ: google.com/trends/…

— Faris Zacina

วันนี้propควรใช้แทนattrการอัปเดต DOM attrหมายถึงสถานะหน้าเดิมในการโหลด

— AntonChanning

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
แหล่งที่มา

4

ปัญหาของคุณคือ cr (การคืนรถ)

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

คุณสามารถใช้ได้:

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

— Matías Damonte
แหล่งที่มา

ทางออกที่นี่คืออะไร?

— AHH

วิธีแก้ปัญหาคือการลบเส้นแบ่ง (การกลับรถ) ออกจากฐาน 64

— Kevin Boucher