Utiliser une variable comme source pour afficher une image

Résolu/Fermé
TR_2000 Messages postés 23 Date d'inscription mardi 17 mai 2022 Statut Membre Dernière intervention 28 juin 2022 - Modifié le 14 juin 2022 à 10:56
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 14 juin 2022 à 12:02
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 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
14 juin 2022 à 12:02
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