如何通过Fetch获取API数据并在HTML的div中显示图片？

我看了你的代码，发现几个小问题导致图片没法正常显示，咱们一步步来修正：

你的代码里存在的问题： #

• DOM元素获取拼写错误：getElementbyId应该写成getElementById（JavaScript是大小写敏感的，ById里的B要大写）
• 变量使用错误：你定义了getimage变量，但后续却用了未声明的texting，而且你需要的是设置图片的src属性，不是给元素设置文本内容
• 无效的初始赋值：一开始给getimage.src = "data"完全没必要，反而可能干扰后续的正确赋值

修正后的完整代码： #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Image</title>
</head>
<body>
    <!-- 将图片放在div中，满足你在div里显示图片的需求 -->
    <div>
        <img id="test" alt="大都会博物馆藏品">
    </div>

    <script>
        // 正确获取页面中的img元素
        const imageElement = document.getElementById('test');

        fetch('https://collectionapi.metmuseum.org/public/collection/v1/objects/435828')
            .then((response) => {
                // 先判断请求是否成功，避免解析错误的响应
                if (!response.ok) {
                    throw new Error(`请求失败，状态码：${response.status}`);
                }
                return response.json();
            })
            .then((data) => {
                // 将API返回的primaryImage地址赋值给图片的src属性
                imageElement.src = data.primaryImage;
            })
            .catch((error) => {
                // 处理请求或图片加载中的错误，提升用户体验
                console.error('加载图片出错:', error);
                imageElement.alt = '图片加载失败，请稍后重试';
            });
    </script>
</body>
</html>

代码说明： #

1. 修正了getElementById的拼写错误，确保能正确获取到图片元素
2. 移除了无效的初始src赋值，改为在Fetch请求成功后，直接将API返回的图片URL赋值给img的src属性
3. 增加了错误处理逻辑：如果请求失败（比如网络问题）或者API返回数据异常，会在控制台打印错误信息，同时修改图片的alt文本提示用户
4. 把img标签放在了div内部，完美符合你“在div中显示图片”的需求

备注：内容来源于stack exchange，提问作者Tan J