如何在前端使用 Ajax 接收后台传来的图片？

15 min read

要接收后台传来的图片，可以使用ajax发送一个HTTP请求，将图片的URL传送到服务器，由服务器返回图片的二进制数据。具体步骤如下：

  1. 使用ajax发送HTTP请求，设置请求方式为GET或POST，设置URL为图片的地址。
  2. 在请求完成后，使用XMLHttpRequest的responseType属性设置为'blob'，以便将服务器返回的二进制数据以Blob对象的形式接收。
  3. 在接收到数据后，可以使用URL.createObjectURL()创建一个URL，将Blob对象转换为URL地址，以便在web页面上显示图片。

下面是一个示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'image.jpg', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = this.response;
    var img = document.createElement('img');
    img.onload = function(e) {
      window.URL.revokeObjectURL(img.src); // 释放内存
    };
    img.src = window.URL.createObjectURL(blob);
    document.body.appendChild(img); // 将图片添加到DOM中显示
  }
};

xhr.send();