recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment afficher une image de chat aléatoire provenant d'une API sur ma page Web à l'aide de l'attente asynchrone en JavaScript et HTML ?

<p>J'écris un programme qui effectue des appels à partir d'une API pour obtenir des images de chats aléatoires. Je veux pouvoir afficher l'image sur ma page Web, pas seulement l'URL dans la console. </p> <p>//Voici mon code HTML (c'est vraiment basique mais je veux juste que la sortie fonctionne)</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html lang="fr"> <tête> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titre>Gif chat</titre> ≪/tête> <corps> <div class="conteneur"> <h1>Il s'agit d'une image aléatoire d'un chat !</h1> </div> <script src="catGif.js"> </script> </corps> </html></pre> <p>//Voici mon JavaScript</p> <pre class="brush:php;toolbar:false;">let conteneur = document.querySelector(".container"); fonction asynchrone apiFunction() { wait fetch("https://api.thecatapi.com/v1/images/search") .then(res => res.json()) .then((résultat) => { //éléments = résultat ; let img = document.createElement("img"); img.src = résultat[0].url; conteneur.appendChild(img); }), (erreur) => console.log(erreur); } }</pre></p>
P粉617237727P粉617237727490 Il y a quelques jours597

répondre à tous(1)je répondrai

  • P粉001206492

    P粉0012064922023-09-05 10:28:01

    Vous n'appelez pas la fonction que vous avez définie. 

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Gif</title>
</head>

<body>
    <div class="container">
        <h1>This is a random image of a cat!</h1>
    </div>

    <script>
        let container = document.querySelector(".container");
        async function apiFunction() {
            await fetch("https://api.thecatapi.com/v1/images/search")
                .then(res => res.json())
                .then((result) => {
                    //items = result;
                    let img = document.createElement("img");
                    img.src = result[0].url;
                    container.appendChild(img);
                }),
                (error) => {
                    console.log(error);
                }
        }
        // Call the function
        apiFunction();
    </script>
</body>

</html>

    répondre
    0
  • Annulerrépondre