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

r1zhe5dt  于 2023-05-27  发布在  Java
关注(0)|答案(1)|浏览(196)

**已关闭。**此问题为not reproducible or was caused by typos。目前不接受答复。

此问题是由打印错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
2天前关闭。
Improve this question
我写了一个程序,从一个API调用,以获得一个随机的猫的形象。我希望能够在我的网页上显示图像,而不仅仅是在控制台中显示URL。
//这是我的html(这是非常基本的,但我只是想让输出工作)

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

//这是我的javascript

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);
            }
    }
balp4ylt

balp4ylt1#

您没有调用定义的函数。

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

相关问题