Obtenir l'image du serveur et la prévisualiser sur le client

Question

Donc je suis en train d'essayer de récupérer une image depuis un serveur et de la prévisualiser côté client. Je peux pour l'instant récupérer l'image, mais je ne sais pas comment la prévisualiser de manière asynchrone sur une page web.

axios.get(link,{responseType:'stream'}).then(img=>{
// Que dois-je faire ici ?
}); 

Merci.

Answer 1

Tout d'abord, vous devez récupérer votre image avec le type de réponse arraybuffer. Ensuite, vous pouvez convertir le résultat en une chaîne base64 et l'assigner en tant que src d'une balise image. Voici un petit exemple avec 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 ;
  }
}

export default Image;