Utiliser une variable comme source d'image

Version imprimable

26/12/2023, 08h10
philippepetit

Utiliser une variable comme source d'image
Bonjour,

j'ai une variable JavaScript créée par mon programme.

ma variable JS est Win :

Si je fais une alert du type
Code:

1 2 var Win = p['art']['url']; alert(Win);
j'obtiens l'url d'une image (en base 64) dans l'alert du type : data:image/jpeg;base64,/9j/4VqSRXhpZgA...............UIpJykf/2Q==.

si je copie cette url dans un navigateur, l'image s'affiche correctement.

je souhaite utiliser cette variable comme la source d'une nouvelle image du type:

Code:

<img id='blabla' src='que mettre ici à partir de la variable Win ?' >

en espérant que ma demande est assez claire
26/12/2023, 09h02
ProgElecT

Salut

Code:

document.getElementById("blabla").src=Win ;
27/12/2023, 19h14
philippepetit

Merci de votre réponse

Code:

document.getElementById("blabla").src=Win ;

je comprends votre proposition JS, mais mon problème est de savoir comment rédiger ma balise html <img>
pour qu'elle utilise votre proposition comme source.

N'hésitez pas à me faire savoir si ma question n'est pas claire pour vous
27/12/2023, 19h47
ASCIIDEFOND

Salut à tous,

philippepetit, si la balise <img> avec un ID est déjà présente dans le code HTML, la solution proposée par ProgElecT assignera une nouvelle image à cette balise via l'attribut src.
Dans l'exemple, la variable Win contient l'url de l'image.

Bonjour ProgElecT et ASCIIDEFOND
et surtout merci !

Il suffisait simplement de mettre le script JS au bon endroit !

Je joins un petit code avec vos suggestions pour aider les personnes un peu lentes comme moi, à comprendre votre proposition et je passe en Résolu.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
 
		<img id="azerty" style="height:20%; width:20%;" src = "data:image/jpeg;base64,/9j/4VqSRXhpZgAA  -> souce de l'image <-  ZAAAAngAAAA8B.......";>
		<img id="blabla" style="height:20%; width:20%;" src = "" >
 
		<script>
                        var Win = "data:image/jpeg;base64,/9j/4VqSRXhpZgAA  -> souce de l'image <-  ZAAAAngAAAA8B.......";
                        document.getElementById("blabla").src=Win ;
                        alert(Win);
                </script>
	</body>
</html>