如何显示从 axios 请求返回的图像（React）？

我正在使用 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}));
  }

the 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'))
}

from b4dnewz来自 axios 文档。但是，我找不到合理的方法如何使用该响应类型在子组件中显示图像。我的问题是，我的方法有效吗？我有什么理由不应该这样使用它吗？

如果您从 api 获取图像 url，那么您的第一种方法是正确的方法，但是

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

当图像本身以二进制形式从服务器接收时使用该方法，该图像被转换为​​ Base 64 并提供给<img>