サーバーからイメージを取得してクライアントでプレビューする

Question

サーバーからイメージを取得してクライアントでプレビューすると、イメージを取得できますが、プレビューする方法はわかりません非同期的にWebページ。

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;