如何显示从axios请求(React)返回的图像?

时间:2018-06-09 09:18:51

标签: reactjs google-maps axios

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

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

1 个答案:

答案 0 :(得分:2)

如果您从api获取图片网址,那么您的第一种方法是正确的方法,但是

<img>
当从服务器接收图像本身作为二进制文件时使用

方法,该二进制文件转换为base 64并赋予@Entity