base64でイメージソースを設定する方法

93

Imageソースを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、2013年

136

setAttribute代わりに使用してみてください：

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

実際の答え：（ そして、base64の改行を必ず削除してください。）

— ケビン・ブーシェ
ソース

thx、私は10分で受け入れます、なぜsetAttributeの方が優れているのですか？

— ポペル2013年

@poppelそれは重要ではないと思うが、あなたのフィドルを修正するための私の最初の試みはを使用することsetAttributeでした。それが失敗した後、base64エンコーディングの改行に気づきました。（私は答えを提出するために急いでいたので、src=改行を修正した後はそれを試しませんでした。）

— Kevin Boucher

26

jQueryを使用してBase64からイメージを設定する場合：

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

— ファリス・ザチーナ
ソース

5

@TruthSerumは、Reactスタックに切り替えるため、使用していません。しかし、楽しみのために、あなたの主張を証明するための統計的証拠はありますか？jQueryを使用するレガシーWebアプリがないと本当に思いますか？あなたのコメントはあなたの個人的な意見に基づいており、本当に私の個人的な時間の無駄です。また、プロジェクトをチェックすると、プロジェクトはまだ維持されており、フォロワーが非常に多いです。github.com/jquery/jquery/commits/master

— Faris Zacina 16

5

あなたのコメントを投稿する前にそれらをチェックする機会がなかったので、またここで@TruthSerumは、いくつかの統計です：google.com/trends/...

— ファリス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
ソース

3

あなたの問題はcr（キャリッジリターン）です

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

あなたは使うことができます：

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

— マティアスダモンテ
ソース

ここでの解決策は何ですか？

— AHH

ここで溶液は、ベース64から（キャリッジリターン）改行を除去することである

— ケビン・バウチャー