<!DOCTYPE html><html><head> <title>显示图片</title></head><body> <img id="myImage" src="" alt="图片"> <button onclick="loadImage()">加载图片</button> <script> function loadImage() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com/api/image', true); xhr.responseType = 'blob'; xhr.onload = function(e) { if (this.status == 200) { var blob = this.response; var img = document.getElementById('myImage'); img.onload = function(e) { window.URL.revokeObjectURL(img.src); // 释放内存 }; img.src = window.URL.createObjectURL(blob); } }; xhr.send(); } </script></body></html>
时间: 2023-06-15 08:05:22 浏览: 100
这是一个使用 XMLHttpRequest 对象加载图片并将其显示在网页上的示例代码。当用户点击“加载图片”按钮时,该代码将向指定的 API 发送 GET 请求,获取图片数据后将其转换为 Blob 对象,并将 Blob 对象的 URL 赋值给 img 元素的 src 属性,从而在网页上显示该图片。需要注意的是,为了避免内存泄漏,需要在 img 元素的 onload 事件中调用 window.URL.revokeObjectURL 方法释放内存。