API insertion jpg sur Javascript

Signaler
Messages postés
2
Date d'inscription
mercredi 20 mai 2020
Statut
Membre
Dernière intervention
20 mai 2020
-
Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
-
Bonjour à tous,

En utilisant un API via un fetch, j'arrive bien à récupérer les données du site internet, cependant, je n'arrive pas à récupérer les url en jpg en format image. Après avoir essayer plusieurs manipulation sur mon HTML je n'arrive toujours pas à faire apparaitre cette instance en format image et non format url xxxxx.jpg

Mon code ressemble à ça
<body>

<p> Meal: <span id ="lat"></span></p><br>
<p> Image:<span id ="lon"></span></p><br>

<script>

    const api_url ='https://www.themealdb.com/api/json/v1/1/filter.php?c=chicken';
    async function getRecipe(){
        const response = await fetch(api_url);
        const data = await response.json(); 
        
        document.getElementById('lat').textContent =data["meals"]["1"]["strMeal"];
        document.getElementById('lon').textContent =data["meals"]["1"]["strMealThumb"];
        
        console.log(data.latitude);
        console.log(data.longitude);

    }
    getRecipe();

</script>
</body>


Et voila ma page web


Auriez-vous des conseils ?

Merci d'avance !

1 réponse

Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617
Bonjour,

Au lieu d'utiliser textContent pour afficher l'url ....
places une balises img dans ton html et joue sur son attribut src
Messages postés
2
Date d'inscription
mercredi 20 mai 2020
Statut
Membre
Dernière intervention
20 mai 2020

Bonsoir Jordane,

Sais-tu avec quoi je peux remplacer textContent ?

Merci d'avance
Messages postés
28958
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617 >
Messages postés
2
Date d'inscription
mercredi 20 mai 2020
Statut
Membre
Dernière intervention
20 mai 2020

Je te l'ai déjà indiqué ...
ne pas utiliser un SPAN mais une balise IMG
Et "remplir" son attribut SRC