在 <img 标记中显示个人资料图片>

Question

我想在反应网络应用程序中显示我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

您是否正在从state中解构profilePhoto？这样 const { profilePhoto } = this.state;

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