如何在HTML中添加图片？图片URL存于JS变量并实现API点击换图

你的代码存在一个关键问题：直接将JSON API的地址赋值给图片的src属性，浏览器会尝试把接口返回的JSON数据当作图片文件解析，这必然无法正常显示图片。正确的做法是先请求API获取到图片的真实URL，再将其渲染到页面中。

完整实现代码 #

下面是修正后的代码，包含了请求API、存储图片URL、渲染图片的完整逻辑：

<html>
<head>
    <title>随机图片生成器</title>
</head>
<body>
    <div id="img_home"></div>
    <button onclick="loadRandomImage()">下一张</button>

    <script>
        // 定义变量存储当前图片URL，方便后续复用
        let currentImageUrl = '';

        async function loadRandomImage() {
            try {
                // 发起请求获取API返回的JSON数据
                const response = await fetch('https://www.abcd.com/image-generator.json');
                const data = await response.json();
                
                // 从JSON中提取图片URL，存入变量
                // 注意：这里的`data.imageUrl`要对应你API返回的字段名，比如如果接口返回的是{"url":"xxx"}，就改成data.url
                currentImageUrl = data.imageUrl;
                
                // 将图片渲染到页面中
                const imgContainer = document.getElementById('img_home');
                // 方案1：替换容器内的现有图片（避免页面堆积大量图片）
                imgContainer.innerHTML = `<img src="${currentImageUrl}" alt="随机图片" style="max-width: 100%;" />`;
                
                // 方案2：在容器内添加新图片（会不断新增图片）
                // const img = new Image();
                // img.src = currentImageUrl;
                // img.alt = "随机图片";
                // img.style.maxWidth = "100%";
                // imgContainer.appendChild(img);
            } catch (error) {
                console.error('加载图片失败:', error);
            }
        }

        // 页面加载完成后自动加载第一张图片
        window.onload = loadRandomImage;
    </script>
</body>
</html>

关键逻辑说明 #

• 请求API：用fetch（异步请求API的现代方法）获取JSON数据，async/await语法让异步代码更易读。
• 存储图片URL：用currentImageUrl变量存储拿到的图片地址，你可以在其他函数中直接使用这个变量。
• 渲染图片：提供了两种渲染方式，替换现有图片适合单图切换场景，添加新图片适合需要保留历史图片的场景，按需选择即可。

兼容旧浏览器的写法（不用async/await） #

如果需要兼容不支持async/await的旧浏览器，可以用then链式调用：

let currentImageUrl = '';

function loadRandomImage() {
    fetch('https://www.abcd.com/image-generator.json')
        .then(response => response.json())
        .then(data => {
            currentImageUrl = data.imageUrl;
            const imgContainer = document.getElementById('img_home');
            imgContainer.innerHTML = `<img src="${currentImageUrl}" alt="随机图片" style="max-width: 100%;" />`;
        })
        .catch(error => console.error('加载失败:', error));
}

window.onload = loadRandomImage;

内容的提问来源于stack exchange，提问作者Saber_32