Existe-t-il un moyen de définir l'image d'arrière-plan comme une image codée en base64 ?

Question

Je veux changer l'arrière-plan dynamiquement en JS et mon ensemble d'images est codé en base64. J'essaie :

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

avec un résultat parfait,

mais je n'arrive pas à faire la même chose avec :

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

ni

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

Y a-t-il un moyen de le faire ?

Answer 1

C'est la façon correcte de faire un appel pur. Pas de CSS.

<div style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC)repeat-x center;'></div>

Answer 2

Haga no utiliser les guillemets à l'intérieur url lors de l'utilisation de données URIs .

li {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}

Answer 3

Je pense que ça va aider, La base64 est traitée par CSS d'une manière différente, vous devez définir le type de données de l'image en base64, cela aidera le CSS à changer la base64 en image et à l'afficher à l'utilisateur. Vous pouvez utiliser cela en javascript en assignant l'image de fond en utilisant le jquery script, il changera automatiquement la base64 en image et l'affichera.

url = "data:image;base64,"+data.replace(/(\r\n|\n|\r)/gm, "");
$("body").css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");

Answer 4

Ce que je fais habituellement, c'est d'abord stocker la chaîne complète dans une variable, comme ceci :

<?php
$img_id = 'data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAY...';
?>

Ensuite, où je veux que l'un ou l'autre JS fasse quelque chose avec cette variable :

<script type="text/javascript">
document.getElementById("img_id").backgroundImage="url('<?php echo $img_id; ?>')";
</script>

Vous pourriez référencer la même variable via PHP directement en utilisant quelque chose comme :

<img src="<?php echo $img_id; ?>">

Ça marche pour moi ;)

Answer 5

Dans mon cas, c'est simplement parce que je n'ai pas défini le paramètre height y width .

Mais il y a un autre problème.

L'image de fond peut être supprimée en utilisant

element.style.backgroundImage=""

mais n'a pas pu être réglé en utilisant

element.style.backgroundImage="some base64 data"

Jquery fonctionne bien.