Question

我想在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="" />

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

Answer 1

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

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

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

1 个答案: