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

【问题标题】：Get image from server and preview it on client从服务器获取图像并在客户端预览
【发布时间】：2017-11-20 12:25:48
【问题描述】：

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

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

谢谢。

【问题讨论】：

我认为在反应中简单地将src 值设置为<img> 会容易得多。像<img src={link} /> 这样的东西应该足够好了。如果您这样做，浏览器将为您加载图像。
谢谢，但这不是我需要的
对不起，我想我误解了你。你到底想做什么？听起来您正试图通过 ajax 加载图像然后显示它？

标签： javascript ajax reactjs axios

【解决方案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;

【讨论】：