APIっていうのがあるやん。なんなんあれ。どうやって使えばいいんや。

①フェッチというやり方でリクエスト？をAPIに送る
②リクエストに応じてレスポンスが返ってくる
③レスポンスの内容をなんか解析する
④解析できたものから情報を取り出す
⑤取り出した情報をHTMLに埋め込む

っていう動作をすれば
どこに画像のurlがあるのか、とか気にせずに情報を取ってくることができるらしいわ！

試しにDog APIを用いて練習してみようやないか。
次のコードでは毎回違う犬の画像がランダムで表示されるんや。

<!DOCTYPE html>
<html lang='ja'>
<head>
    <meta charset="utf-8">
    <title>dog</title>
</head>
<body>
    <h1>ランダムに犬の画像が表示されます</h1>
    <div id="randomDog"></div>
    <script src="script.js"></script>
</body>
</html>

async function displayRandomDog(){       
        const url = "https://dog.ceo/api/breeds/image/random";
        const response = await fetch(url)
        data = await response.json();       
        const object = document.getElementById("randomDog");
        object.innerHTML = `<img src="${data.message}">`;
}
displayRandomDog();

JavaScriptについて

async function displayRandomDog(){}

ここで displayRandomDog いう関数を自分で定義しとるんや。自分で定義するんやから名前は何でもええで。
この関数は async っていう非同期処理を使うためのキーワードが付いとるから、関数の中で await が使えるんや。
非同期処理っちゅうのは、何か時間がかかる処理が終わるのを待つんやけど、待ってる間も他の作業ができるっちゅう便利な機能やな。

const url = "https://dog.ceo/api/breeds/image/random";

url っちゅう変数に、犬のランダムな画像を返してくれるAPIのURLを入れとるんや。このURLにアクセスすると、ランダムな犬の画像がもらえるんや。

const response = await fetch(url)

fetch っていう関数を使うて、さっきの url にリクエストを送っとるんや。このとき await を使うて、リクエストの結果が返ってくるまで待つっちゅうことや。これで response には、リクエストの結果が入るんやで。

data = await response.json();

response に入ってる結果をJSON形式で解析して、data っちゅう変数に入れとるんや。この data の中には、APIから返ってきたデータが入っとるんや。

const object = document.getElementById("randomDog");

object っていう変数に、HTMLの中にある id が "randomDog" の要素を取ってきとるんや。この要素に犬の画像を表示させるんやで。

object.innerHTML = `<img src="${data.message}">`;

ここで、さっき取得した data.message に入っとる犬の画像のURLを使うて、<img> タグを作成し、その中に画像を表示させとるんや。innerHTML を使うて、要素の中身を直接書き換えとるんやで。
`で囲った中には変数を${}で囲むようにして入れ込むことができるんや。
dataっていう変数の中のデータはJSONやから次のようになっとる。一例やで。messageのurlはランダムに与えられるんや。

{
    "message": "https://images.dog.ceo/breeds/hound-walker/n02089867_3044.jpg",
    "status": "success"
}

jsonの変数の中のデータにアクセスるにはドットを使えばできる。
例えば上のデータやったら
data.messageには"https://images.dog.ceo/breeds/hound-walker/n02089867_3044.jpg"
data.statusには"success"が入ってるんや。

displayRandomDog();

最後に、関数 displayRandomDog を呼び出して実行しとるんや。この一行で、犬の画像がランダムに表示されるっちゅうわけやな。

こんな感じやで！このコードを使うたら、可愛いやろ？