121

JS で背景を動的に変更したいのですが、画像のセットは base64 でエンコードされています。私は試します：

document.getElementById("bg_image").style.backgroundImage = 
   "url('http://amigo.com/300107-2853.jpg')";

完璧な結果で、

それでも私は同じことをしません： 

document.getElementById("bg_image").style.backgroundImage = 
   "url('data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...')";

または

document.getElementById("bg_image").style.backgroundImage = 
   "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";

それを行う方法はありますか？

4

10 に答える 10

40

base64でも同じ問題がありました。将来同じ問題を抱えている人のために：

url = "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";

これはコンソールから実行しても機能しますが、スクリプト内からは機能しません:

$img.css("background-image", "url('" + url + "')");

しかし、少し遊んだ後、私はこれを思いつきました：

var img = new Image();
img.src = url;
$img.css("background-image", "url('" + img.src + "')");

プロキシ イメージで動作する理由はわかりませんが、動作します。Firefox Dev 37 および Chrome 40 でテスト済み。

それが誰かを助けることを願っています。

編集

もう少し調べた。エンコードされた値に改行が存在するため、base64エンコーディング（少なくとも私の場合）がCSSで壊れることがあるようです（私の場合、値はActionScriptによって動的に生成されました）。

単に例を使用して：

$img.css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");

も機能し、プロキシ イメージを使用するよりも数ミリ秒速いようです。

于 2015-02-02T22:57:57.453 に答える
33

これを試してください、私は成功の応答を得ました..それは働いています

$("#divId").css("background-image", "url('data:image/png;base64," + base64String + "')");
于 2014-10-10T08:46:02.513 に答える
9

私はこれを試しました（そして私のために働きました）：

var img = 'data:image/png;base64, ...'; //place ur base64 encoded img here
document.body.style.backgroundImage = 'url(\'' + img + '\')';

ES6 構文:

let img = 'data:image/png;base64, ...'
document.body.style.backgroundImage = `url('${img}')`

少し良く：

let setBackground = src => {
    this.style.backgroundImage = `url('${src}')`
};

let node = nodeIGotFromDOM, img = imageBase64EncodedFromMyGF;
setBackground.call(node, img);
于 2016-02-17T16:11:02.637 に答える
4

これは純粋な呼び出しを行う正しい方法です。CSS なし。

<div style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC)repeat-x center;'></div>
于 2015-12-19T18:46:47.217 に答える