后端返回的图片网络地址url，如何在前端转成文件流并显示出来

在前端，将后端返回的图片URL转换为文件流并显示通常涉及到HTML5的一些API，如FileReader或Blob对象。以下是基本步骤：

1. 获取URL：首先，你需要从服务器获取到图片的URL。

let imageUrl = 'http://example.com/image.jpg';

2. 创建Blob：使用URL.createObjectURL()函数创建一个Blob对象，这相当于临时的文件引用。

let xhr = new XMLHttpRequest();
xhr.open('GET', imageUrl, true);
xhr.responseType = 'blob'; // 设置请求类型为二进制数据

xhr.onload = function () {
  if (xhr.status === 200) {
    let blob = xhr.response; // 图片响应作为一个Blob对象
    let url = URL.createObjectURL(blob); // 转换为URL
    displayImage(url); // 显示图片
  }
};

xhr.send();

3. 显示图片：你可以直接创建一个`<img>`标签，设置其src属性为生成的文件流URL，或者使用 FileReader API 将Blob读取为ArrayBuffer再显示。

function displayImage(url) {
  var img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
}