在<img tag=""/>中显示个人资料照片

时间:2019-03-28 13:52:52

标签: reactjs typescript graph

我想在React Web应用程序中显示来自Microsoft Graph的个人资料照片。我已经收到图片了,但是只能将其打印到控制台上。

componentDidMount(){
      let url = "https://graph.microsoft.com/v1.0/me/photo/$value"
      let request = new Request(url, {
        method: "GET",
        headers: new Headers({
            "Authorization": "Bearer " + accessToken
        })
      });
    fetch(request)
    .then((response) => {
      response.json()
    .then((res) => {
        let photo:[MicrosftGraph.Photo] = res.value;
        console.log(photo);
        this.setState({profilePhoto:photo});
      })
     })
    .catch((error) => {
      console.error(error);
  }); 
  }

在页面返回中,我执行以下操作

<img src={profilePhoto} alt="" />

它没有在页面上显示我的照片。我该怎么做才能解决此问题?

1 个答案:

答案 0 :(得分:0)

您是否要从profilePhoto来解构state?像这样 const { profilePhoto } = this.state;

如果没有,则需要使用 {this.state.profilePhoto && <img src={this.state.profilePhoto} alt="" />}