Utiliser une variable comme source pour afficher une image

Résolu
TR_2000 Messages postés 21 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour,

J'envoie l'URL d'une image encodée en base64 via websocket à mon client js, j'aimerais ensuite utiliser cette string en tant que source dans la balise img de mon code html.

<section>
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAADICAAAAABTgsyVAAACk0lEQVR4nO3VQQ3DQAwAwV6//RZAKYRTqJRCQAROCF1BpFEeO0PAliytx/YAqp53LwDcRwAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAAOOu1znksPspfvL9z7p9x/SD3gjABgDABgDABgDABgDABgDABgDABgDABgLAfM/MI+MqME/MAAAAASUVORK5CYII=" alt="Red dot" />
            <br>
            FFT[197]:  <span id="data"></span>
        </section>


Pour le moment j'affiche mon image mais qu'en copiant collant la chaine de caractère de cette manière.

Mon code javascripte est le suivant :

if ("WebSocket" in window) {
 
 // Let us open a web socket
 var ws = new WebSocket("ws://localhost:8000");
 ws.onopen = function(){
  
  // Web Socket is connected, send data using send()
  ws.send("Client web connecté");
 };

 ws.onmessage = function (evt) { 
  var base64Url = evt.data;
  document.getElementById("data").innerHTML=base64Url;
 };

 ws.onclose = function(){ 
  
  // websocket is closed.
  alert("Connection is closed..."); 
 };
} else {
 
 // The browser doesn't support WebSocket
 alert("WebSocket NOT supported by your Browser!");
}


La chaine de caractères est reçue dans la variable "base64Url" et c'est celle ci que j'aimerais utiliser pour afficher l'image.

Je ne sais pas comment procéder... Il faut aussi savoir que c'ette image sera raffraichit chaque seconde via la variable qui sera modifiée dans le js. Je ne sais pas si c'est possible avec cette méthode où si cela nécessite de faire plus compliqué.

Merci pour votre aide,
A voir également:

1 réponse

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Pour faire un refresh toutes les X secondes :
https://www.w3schools.com/jsref/met_win_setinterval.asp

Pour modifier l'image, il faut modifier sa propriété SRC
https://www.google.com/search?q=javascript+img+src
1