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

问题描述：

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

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

谢谢。

我认为简单地将一个'src'值设置为''将会容易得多。像''应该足够好。如果你这样做，浏览器会为你加载图像。 – DonovanM

谢谢，但这不是我所需要的 –

对不起，我想我误解了你。你究竟想要做什么？这听起来像你试图通过Ajax加载图像，然后显示它？ – DonovanM

答

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

你是最棒的！ –

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

相关推荐