Bagaimanakah cara saya memaparkan imej kucing rawak daripada API pada halaman web saya menggunakan async-await dalam JavaScript dan HTML?
P粉617237727
2023-09-04 15:22:47
<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>
Anda tidak memanggil fungsi yang anda tetapkan.