Як я можу встановити джерело зображень за допомогою base64

93

Я хочу встановити для джерела зображень джерело base64, але воно не працює:

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

JavaScript

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

javascript base64

— поппел
джерело

9

Це працює, якщо видалити розриви рядків у рядку base64. Скрипку оновлено.

— Адріано Репетті

136

Спробуйте setAttributeзамість цього:

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

Реальна відповідь: (І обов’язково видаліть розриви рядків у base64.)

— Кевін Баучер
джерело

thx, я прийму через 10 хвилин, чому setAttribute краще?

— поппел

@poppel Я не думаю, що це має значення, але моєю першою спробою виправити вашу скрипку було використання setAttribute. Саме після цього не вдалося, я помітив розриви рядків у кодуванні base64. (Оскільки я поспішав отримати відповідь, я не спробував її src=після виправлення розривів рядків.)

— Кевін Баучер,

26

Якщо ви віддаєте перевагу використовувати jQuery для встановлення зображення з Base64:

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

— Фаріс Зачина
джерело

5

@TruthSerum ми його не використовуємо, оскільки ми перемикаємось на стек React. Але для розваги, чи є у вас статистичні докази, що підтверджують вашу претензію? Ви справді думаєте, що немає застарілих веб-програм, що використовують jQuery? Ваш коментар базується на вашій особистій думці, і це справді марна трата мого особистого часу. Крім того, якщо ви перевірите проект, він все ще підтримується і має величезну базу послідовників. github.com/jquery/jquery/commits/master

— Faris Zacina

5

Також @TruthSerum ось кілька статистичних даних, оскільки ви не мали можливості перевірити їх перед тим, як розмістити свій коментар: google.com/trends/…

— Фаріс Зачіна,

Ці дні propслід використовувати замість attrоновлення DOM. 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=="

— Матіас Дамонте
джерело

Яке саме рішення тут?

— AHH

Рішення тут - усунути розриви ліній (повернення каретки) з бази 64.

— Кевін Баучер,