Ich schreibe ein Programm, das Aufrufe von einer API ausführt, um zufällige Katzenbilder zu erhalten. Ich möchte das Bild auf meiner Webseite anzeigen können, nicht nur die URL in der Konsole. //Das ist mein HTML (das ist wirklich einfach, aber ich möchte nur, dass die Ausgabe funktioniert) <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metan

Wie zeige ich mit async-await in JavaScript und HTML ein zufälliges Katzenbild von einer API auf meiner Webseite an?

<p>Ich schreibe ein Programm, das Aufrufe von einer API durchführt, um zufällige Katzenbilder zu erhalten. Ich möchte das Bild auf meiner Webseite anzeigen können, nicht nur die URL in der Konsole. </p> <p>//Das ist mein HTML (das ist wirklich einfach, aber ich möchte nur, dass die Ausgabe funktioniert)</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html lang="en"> <Kopf> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Katzen-Gif</title> </head> <Körper> <div class="container"> <h1>Dies ist ein zufälliges Bild einer Katze!</h1> </div> <script src="catGif.js"> </script> </body> </html></pre> <p>//Das ist mein JavaScript</p> <pre class="brush:php;toolbar:false;">let container = document.querySelector(".container"); asynchrone Funktion apiFunction() { Warten auf Abruf("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); }), (Fehler) => console.log(error); } }</pre></p>

P粉617237727411 Tage vor523

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

Wie zeige ich mit async-await in JavaScript und HTML ein zufälliges Katzenbild von einer API auf meiner Webseite an?

Antworte allen(1)Ich werde antworten