title: How to display an image which comes back from an axios request (React)?
body: <p>I'm working on a google maps project with React. I assign an onClick handler the following method:</p>
  
  <pre><code>  getStreetView(lat,lng){
      let url = `https://maps.googleapis.com/maps/api/streetview?size=600x300&amp;location=${lat},${lng}&amp;heading=151.78&amp;pitch=-0.76&amp;key=MYAPIKEY`
      axios.get(url).then(response=&gt;this.setState({image:response.config.url}));
    }
  </code></pre>
  
  <p>the <code>state = { image: null }</code> is then beeing assigned the url which I later pass on to an image tag to a child component such as <code>&lt;img src={props.image} alt='street view'/&gt;</code>. Everything works like a charm, however I have come across various other solutions such:</p>
  
  <pre><code>function getBase64(url) {
    return axios
      .get(url, {
        responseType: 'arraybuffer'
      })
      .then(response =&gt; Buffer.from(response.data, 'binary').toString('base64'))
  }
  </code></pre>
  
  <p>from <code>b4dnewz</code> from the axios documentation. However I can't find a reasonable approach how to display the image in child component with that response type. My question is, is my approach valid? Is there any reasons why I shouldn't be using it like that?</p>