Làm cách nào để đặt Nguồn hình ảnh với base64

93

Tôi muốn đặt nguồn Hình ảnh thành nguồn base64 nhưng nó không hoạt động:

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

JavaScript

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

javascript base64

— nhà nguyện
nguồn

9

Nó hoạt động nếu bạn loại bỏ các ngắt dòng trong chuỗi base64. Đã cập nhật Fiddle.

— Adriano Repetti

136

Hãy thử sử dụng setAttributethay thế:

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

Câu trả lời thực sự: (Và đảm bảo bạn loại bỏ các dấu ngắt dòng trong base64.)

— Kevin Boucher
nguồn

thx, tôi sẽ chấp nhận trong 10 phút, tại sao setAttribute lại tốt hơn?

— poppel

@poppel Tôi không nghĩ nó quan trọng, nhưng nỗ lực đầu tiên của tôi để sửa lỗi fiddle của bạn là sử dụng setAttribute. Sau đó không thành công, tôi nhận thấy các ngắt dòng trong mã hóa base64. (Vì tôi đang gấp rút gửi câu trả lời nên tôi đã không thử src=sau khi sửa lỗi ngắt dòng.)

— Kevin Boucher,

26

Trong trường hợp bạn thích sử dụng jQuery để đặt hình ảnh từ Base64:

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

— Faris Zacina
nguồn

5

@TruthSerum chúng tôi không sử dụng nó, vì chúng tôi chuyển sang ngăn xếp React. Nhưng nói cho vui, bạn có bằng chứng thống kê để chứng minh tuyên bố của mình không? Bạn có thực sự nghĩ rằng không có ứng dụng web kế thừa nào sử dụng jQuery không? Nhận xét của bạn dựa trên ý kiến cá nhân của bạn, và thực sự lãng phí thời gian cá nhân của tôi. Ngoài ra nếu bạn kiểm tra dự án, nó vẫn được duy trì và có lượng người theo dõi rất lớn. github.com/jquery/jquery/commits/master

— Faris Zacina

5

Cũng @TruthSerum đây là một số số liệu thống kê, kể từ khi bạn không có cơ hội để kiểm tra xem chúng trước khi gửi bài bình luận của bạn: google.com/trends/...

— Faris Zacina

Những ngày này, propnên được sử dụng thay vì attrcập nhật DOM. attrđề cập đến trạng thái trang gốc khi tải.

— 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
nguồn

3

Vấn đề của bạn là cr (ký tự xuống dòng)

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

bạn có thể dùng:

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

— Matías Damonte
nguồn

Giải pháp chính xác ở đây là gì?

— AHH

Giải pháp ở đây là để loại bỏ các ngắt dòng (xuống dòng) từ cơ sở 64.

— Kevin Boucher