Rumah  >  Soal Jawab  >  teks badan

Bagaimanakah cara saya memaparkan imej kucing rawak daripada API pada halaman web saya menggunakan async-await dalam JavaScript dan HTML?

<p>Saya sedang menulis program yang membuat panggilan daripada API untuk mendapatkan imej kucing rawak. Saya mahu dapat memaparkan imej pada halaman web saya, bukan hanya url dalam konsol. </p> <p>//Ini adalah html saya (ini benar-benar asas tetapi saya hanya mahu output berfungsi)</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html lang="ms"> <kepala> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gif Kucing</title> </head> <badan> <div class="bekas"> <h1>Ini ialah imej rawak kucing!</h1> </div> <skrip src="catGif.js"> </skrip> </badan> </html></pre> <p>//Ini JavaScript saya</p> <pre class="brush:php;toolbar:false;">let container = document.querySelector(".container"); fungsi tak segerak apiFunction() { tunggu pengambilan("https://api.thecatapi.com/v1/images/search") .then(res => res.json()) .then((hasil) => { //item = hasil; biarkan img = document.createElement("img"); img.src = hasil [0].url; container.appendChild(img); }), (ralat) => console.log(error); } }</pre></p>
P粉617237727P粉617237727411 hari yang lalu519

membalas semua(1)saya akan balas

  • P粉001206492

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

    Anda tidak memanggil fungsi yang anda tetapkan.

    <!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>

    balas
    0
  • Batalbalas