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

huangapple
go评论98阅读模式
英文:

How can I display a random cat image from an API on my webpage using async-await in JavaScript and HTML?

问题

我正在编写一个程序，它调用一个API以获取一张随机的猫咪图片。我想要能够在我的网页上显示这张图片，而不仅仅在控制台中显示URL。

这是我的HTML（非常基本，但我只想让输出正常工作）：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Cat Gif</title>
  8. </head>
  10. <body>
  11.     <div class="container">
  12.         <h1>This is a random image of a cat!</h1>
  13.     </div>
  15.     <script src="catGif.js">
  16.     </script>
  17. </body>
  19. </html>

这是我的JavaScript：

  1. let container = document.querySelector(".container");
  2. async function apiFunction() {
  3.     await fetch("https://api.thecatapi.com/v1/images/search")
  4.         .then(res => res.json())
  5.         .then((result) => {
  6.             let img = document.createElement("img");
  7.             img.src = result[0].url;
  8.             container.appendChild(img);
  9.         }),
  10.         (error) => {
  11.             console.log(error);
  12.         }
  13. }
英文:

I am writing a program which calls from an API to get a random cat image. I want to be able to display that image on my webpage and not just display the url in the console.

//This is my html (It is really basic but I just want to get the output to work)

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7.     &lt;title&gt;Cat Gif&lt;/title&gt;
  8. &lt;/head&gt;
  10. &lt;body&gt;
  11.     &lt;div class=&quot;container&quot;&gt;
  12.         &lt;h1&gt;This is a random image of a cat!&lt;/h1&gt;
  13.     &lt;/div&gt;
  15.     &lt;script src=&quot;catGif.js&quot;&gt;
  16.     &lt;/script&gt;
  17. &lt;/body&gt;
  19. &lt;/html&gt;

//This is my javascript

  1. let container = document.querySelector(&quot;.container&quot;);
  2.     async function apiFunction() {
  3.         await fetch(&quot;https://api.thecatapi.com/v1/images/search&quot;)
  4.             .then(res =&gt; res.json())
  5.             .then((result) =&gt; {
  6.                 //items = result;
  7.                 let img = document.createElement(&quot;img&quot;);
  8.                 img.src = result[0].url;
  9.                 container.appendChild(img);
  11.             }),
  12.             (error) =&gt; {
  13.                 console.log(error);
  14.             }
  15.     }

答案1

得分: 2

你没有调用你定义的函数。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-html -->
  4. <!DOCTYPE html>
  5. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>Cat Gif</title>
  11. </head>
  13. <body>
  14.     <div class="container">
  15.         <h1>This is a random image of a cat!</h1>
  16.     </div>
  18.     <script>
  19.         let container = document.querySelector(".container");
  20.         async function apiFunction() {
  21.             await fetch("https://api.thecatapi.com/v1/images/search")
  22.                 .then(res => res.json())
  23.                 .then((result) => {
  24.                     //items = result;
  25.                     let img = document.createElement("img");
  26.                     img.src = result[0].url;
  27.                     container.appendChild(img);
  28.                 }),
  29.                 (error) => {
  30.                     console.log(error);
  31.                 }
  32.         }
  33.         // Call the function
  34.         apiFunction();
  35.     </script>
  36. </body>
  38. </html>
  40. <!-- end snippet -->

如果你需要进一步的帮助，请告诉我。

英文:

You did not call your defined function.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7.     &lt;title&gt;Cat Gif&lt;/title&gt;
  8. &lt;/head&gt;
  10. &lt;body&gt;
  11.     &lt;div class=&quot;container&quot;&gt;
  12.         &lt;h1&gt;This is a random image of a cat!&lt;/h1&gt;
  13.     &lt;/div&gt;
  15.     &lt;script&gt;
  16.         let container = document.querySelector(&quot;.container&quot;);
  17.         async function apiFunction() {
  18.             await fetch(&quot;https://api.thecatapi.com/v1/images/search&quot;)
  19.                 .then(res =&gt; res.json())
  20.                 .then((result) =&gt; {
  21.                     //items = result;
  22.                     let img = document.createElement(&quot;img&quot;);
  23.                     img.src = result[0].url;
  24.                     container.appendChild(img);
  25.                 }),
  26.                 (error) =&gt; {
  27.                     console.log(error);
  28.                 }
  29.         }
  30.         // Call the function
  31.         apiFunction();
  32.     &lt;/script&gt;
  33. &lt;/body&gt;
  35. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月25日 15:29:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/76329842.html
  • async-await
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定