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

Question

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

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

谢谢。

Answer 1

首先，您需要使用响应类型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;