Как отобразить изображение, которое возвращается из запроса axios (React)?

Question

Я работаю над проектом Google Maps с React.Я назначаю обработчику onClick следующий метод:

  getStreetView(lat,lng){
    let url = `https://maps.googleapis.com/maps/api/streetview?size=600x300&location=${lat},${lng}&heading=151.78&pitch=-0.76&key=MYAPIKEY`
    axios.get(url).then(response=>this.setState({image:response.config.url}));
  }

Затем state = { image: null } присваивается URL-адрес, который я позже передаю тегу изображения дочернему компоненту, например <img src={props.image} alt='street view'/>.Все работает как шарм, однако я сталкивался с различными другими решениями, такими как:

function getBase64(url) {
  return axios
    .get(url, {
      responseType: 'arraybuffer'
    })
    .then(response => Buffer.from(response.data, 'binary').toString('base64'))
}

из b4dnewz из документации Axios.Однако я не могу найти разумный подход к отображению изображения в дочернем компоненте с этим типом ответа.Мой вопрос, мой подход действителен?Есть ли причины, по которым я не должен так его использовать?

Answer 1

Если вы получаете URL-адрес изображения из API, тогда ваш первый метод - правильный подход, но метод

Buffer.from(response.data, 'binary').toString('base64'))

используется, когда само изображение принимается с сервера в виде двоичного файла, который преобразуетсяна базу 64 и присвоено <img>