如何显示从 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}));
}

然后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。但是,我找不到一种合理的方法,如何在具有该响应类型的子组件中显示图像。我的问题是,我的方法有效吗?有什么理由让我不应该那样使用它吗?

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

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

当图像本身作为二进制文件从服务器接收时,使用方法,该二进制文件转换为 Base 64 并提供给<img>

相关内容

  • 没有找到相关文章

最新更新