從服務器獲取圖像並在客戶端上預覽

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;