Как я могу установить источник изображения с помощью base64

96

Я хочу установить источник изображения на источник base64, но он не работает:

JSfiddle.net/NT9KB

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

JavaScript

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
javascript base64 поппель
источник
9
Это работает, если вы удалите разрывы строк в строке base64. Скрипка обновлена.
Адриано Репетти

Ответы:

140

Попробуйте setAttributeвместо этого использовать :

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

Реальный ответ: (И убедитесь, что вы удалили разрывы строк в base64.)

Кевин Баучер
источник
спасибо, приму через 10 минут, почему лучше setAttribute?
poppel
@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/commit/master
Фарис Засина,
5
Также @TruthSerum, вот некоторые статистические данные, так как у вас не было возможности проверить их, прежде чем опубликовать свой комментарий: google.com/trends/…
Фарис Засина,
В наши дни его propследует использовать вместо attrобновления DOM. attrотносится к исходному состоянию страницы при загрузке.
AntonChanning 05
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=="
Матиас Дамонте
источник
Какое именно здесь решение?
AHH
Решение здесь - удалить разрывы строк (возврат каретки) из Base 64.
Кевин Баучер,