Discussion :

[Invité]

Bonjour

J'ai créé une API dans laquelle on y trouve l'id et l'url de la photo de personnages.
J'ai créer un tableau dans lequel les informations de mes personnages sont affichés avec une boucle et lorsque l'on clique sur le prénom de celui ci, un pop up avec sa photo s'affiche.

Mon problème, la photo ne s'affiche pas dans mon pop up, mon pop up est vide, je pense savoir d'où vient le problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function afficherConservation(film_id){
    let popup = document.getElementById("popup");
    let content = document.getElementById("content");
    let span = document.getElementsByClassName("close")[0];
 
    popup.style.display = "block";
 
    let paragraph = document.createElement('p');
 
    const title = document.createTextNode('Portrait : ');
    paragraph.appendChild(title);
    content.insertAdjacentElement('beforeend', paragraph, content);
    const sautLigne = document.createElement('br');
    paragraph.appendChild(sautLigne);
    content.insertAdjacentElement('beforeend', paragraph, content);
 
    const req = new XMLHttpRequest();
    req.open('GET', 'http://localhost/Fil_Rouge/api.php?portrait_id=' + id, true);
 
    req.onreadystatechange = ()=>{
        if(req.readyState === 4 && req.status === 200){
            const data = JSON.parse(req.responseText);
            paragraph;
 
            if(Object.keys(data).length !== 0){
                const state = document.createTextNode(data[0].portrait_url);
                paragraph.appendChild(state);
                content.insertAdjacentElement('beforeend', paragraph, content );
            }
            else{
                const noValueState = document.createTextNode("Non renseigné");
                paragraph.appendChild(noValueState);
                content.insertAdjacentElement('beforeend', paragraph, content);
            }
        }
    };
    req.send();
 
    //  When user clicks on span, close the modal
    span.onclick = ()=>{
        popup.style.display = "none";
        content.innerHTML='';
    }
 
    //  When the user clicks outside the modal, close it
    window.onclick = (event)=>{
        if(event.target == popup){
            popup.style.display = "none"
            content.innerHTML='';
        }
    }
}

*portrait.url est l'url de la photo portrait
Que dois-je changer ?
Merci !

[Toufik83]

Bonjour,

Pour afficher une image, il faut utiliser la balise <img src="..." /> avec l'attribut src qui vaut le lien de l'image.

[Invité]

Bonjour

Merci beaucoup d'avoir pris le temps de me répondre !
Effectivement c'était bien ça !

Du coup j'ai corrigé ce morceau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    if(Object.keys(data).length !== 0){
        const state = document.createTextNode(data[0].portrait_url);
             paragraph.appendChild(state);
                content.insertAdjacentElement('beforeend', paragraph, content );

En celui ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
   if(Object.keys(data).length !== 0){
       const state = document.Element('img');
            state.src = data[0].portrait_url;
                 content.insertAdjacentElement('beforeend', paragraph, 
                    content );

Et ça fonctionne parfaitement !