Javascript 从服务器获取图像并在客户端预览

因此，我试图从服务器获取图像并在客户端预览它，我现在可以检索图像，但我不知道如何在网页上异步预览它

axios.get(link,{responseType:'stream'}).then(img=>{
// What i have to do here ?
}); 

---

谢谢。

首先，您需要使用响应类型

arraybuffer

获取图像。然后，您可以将结果转换为base64字符串，并将其指定为图像标记的

src

。下面是一个带有React的小示例

import React, { Component } from 'react';
import axios from 'axios';

class Image extends Component {
  state = { source: null };

  componentDidMount() {
    axios
      .get(
        'https://www.example.com/image.png',
        { responseType: 'arraybuffer' },
      )
      .then(response => {
        const base64 = btoa(
          new Uint8Array(response.data).reduce(
            (data, byte) => data + String.fromCharCode(byte),
            '',
          ),
        );
        this.setState({ source: "data:;base64," + base64 });
      });
  }

  render() {
    return <img src={this.state.source} />;
  }
}

export default Image;

import React，{Component}来自'React'；
从“axios”导入axios；
类映像扩展组件{
状态={source:null}；
componentDidMount（）{
axios
.得到(
'https://www.example.com/image.png',
{responseType:'arraybuffer'}，
)
。然后（响应=>{
常量base64=btoa(
新的Uint8Array（response.data）。减少(
（数据，字节）=>数据+字符串.fromCharCode（字节），
'',
),
);
this.setState（{source:；base64，“+base64}）；
});
}
render（）{
返回；
}
}
导出默认图像；

我认为简单地将

src

值设置为

应该足够好的值会容易得多。如果您这样做，浏览器将为您加载图像。谢谢，但这不是我需要的。对不起，我想我误解了您。你到底想干什么？听起来像是您试图通过ajax加载图像，然后显示它？