代码之家  ›  专栏  ›  技术社区  ›  KT-mongo

如何显示从AXIOS请求返回的图像(反应)?

  •  1
  • KT-mongo  · 技术社区  · 7 年前

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

    1 回复  |  直到 7 年前
        1
  •  2
  •   Rohith Murali    7 年前

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

    <img>

    推荐文章