JavaScript と HTML で async-await を使用して、Web ページ上の API からランダムな猫の画像を表示するにはどうすればよいですか?
<p>API から呼び出してランダムな猫の画像を取得するプログラムを作成しています。コンソールの URL だけでなく、Web ページに画像を表示できるようにしたいと考えています。 </p>
<p>//これは私の HTML です (これは本当に基本的なものですが、出力が機能するようにしたいだけです)</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="ja">
<頭>
<メタ名="ビューポート"コンテンツ="幅=デバイス幅、初期スケール=1.0""
<title>猫のGIF</title>
</head>
<本体>
<h1>これは猫のランダムな画像です!</h1>
</div>
<script src="catGif.js">
</スクリプト>
</ボディ>
</html></pre>
<p>//これは私の JavaScript です</p>
<pre class="brush:php;toolbar:false;">let Container = document.querySelector(".container");
非同期関数 apiFunction() {
取得を待ちます("https://api.thecatapi.com/v1/images/search")
.then(res => res.json())
.then((結果) => {
//項目 = 結果;
let img = document.createElement("img");
img.src = 結果[0].url;
コンテナ.appendChild(img);
})、
(エラー) => {
コンソール.ログ(エラー);
}
}</pre></p>
全員に返信(1)返信します
