HTML 和 JavaScript 图片接口示例 - 动态加载图片 - 常规

以下是一个简单的图片接口示例，使用 HTML 和 JavaScript 编写：

HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <title>图片接口示例</title>
</head>
<body>
    <h1>图片接口示例</h1>
    <img id='image' src='' alt='Image'>
    <script src='image-api.js'></script>
</body>
</html>

JavaScript 文件 (image-api.js)：

// 定义一个函数，用于获取图片并在指定元素中显示
function getImage(url, elementId) {
    var img = new Image();
    img.onload = function() {
        var element = document.getElementById(elementId);
        element.src = url;
    };
    img.src = url;
}

// 使用示例：获取图片并在 id 为“image”的元素中显示
getImage('https://www.example.com/image.jpg', 'image');

使用该示例中的 getImage 函数，您可以在任何需要动态加载图片的情况下调用该函数。只需将图片 URL 和目标元素的 ID 传递给函数即可。