我正在编写一个程序，该程序从API调用以获取随机的猫图像。我希望能够在我的网页上显示该图像，而不仅仅是在控制台中显示网址。//这是我的html（这确实很基本，但我只想让输出正常工作）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metan

如何使用 JavaScript 和 HTML 中的 async-await 在我的网页上显示来自 API 的随机猫图像？

<p>我正在编写一个程序，该程序从 API 调用以获取随机的猫图像。我希望能够在我的网页上显示该图像，而不仅仅是在控制台中显示网址。</p> <p>//这是我的 html（这确实很基本，但我只想让输出正常工作）</p> <pre class="brush:php;toolbar:false;"><!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 src="catGif.js"> </script> </body> </html></pre> <p>//这是我的 JavaScript</p> <pre class="brush:php;toolbar:false;">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); } }</pre></p>

P粉617237727488 天前589

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

如何使用 JavaScript 和 HTML 中的 async-await 在我的网页上显示来自 API 的随机猫图像？

全部回复(1)我来回复