Как я могу установить источник изображения с помощью 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. Скрипка обновлена.

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

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.

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