如何使用Javascript加载从API获取的图片

// 使用XMLHttpRequest发送GET请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'API_URL', true);
xhr.responseType = 'blob'; // 设置响应类型为二进制数据
xhr.onload = function() {
  if (xhr.status === 200) {
    var blob = xhr.response;
    // 在这里处理获取的图片数据
  }
};
xhr.send();

// 使用Fetch API发送GET请求
fetch('API_URL')
  .then(function(response) {
    return response.blob();
  })
  .then(function(blob) {
    // 在这里处理获取的图片数据
  });

// 将图片数据转换为URL对象
var imageUrl = URL.createObjectURL(blob);
var img = document.createElement('img');
img.src = imageUrl;
document.body.appendChild(img);

// 显示加载中动画
var loadingElement = document.createElement('div');
loadingElement.textContent = 'Loading...';
document.body.appendChild(loadingElement);

// 加载图片并显示
var img = document.createElement('img');
img.onload = function() {
  // 图片加载完成时隐藏加载中动画
  loadingElement.style.display = 'none';
};
img.onerror = function() {
  // 图片加载错误时隐藏加载中动画并显示错误信息
  loadingElement.style.display = 'none';
  var errorElement = document.createElement('div');
  errorElement.textContent = 'Failed to load image.';
  document.body.appendChild(errorElement);
};
img.src = imageUrl;
document.body.appendChild(img);