如何在ReactJS的html标签中通过axios请求获取api中的图像？

Question

我使用 axios 从 api 获取数据，现在我需要在 HTML 的td标签中显示图像，文本响应工作正常但图像未显示。

我的请求代码是：

componentDidMount(){

      var headers = {
        "Content-Type":"application/json",
        "AccessToken":localStorage.TOKEN,
      }

      axios.get(window.$_APIurl+"myProviders/5e463d53e7179a2f011c4104", {headers: headers})
        .then((response) => {   
          console.log(response.data[0].provider.image);
          const doctor = response.data[0].provider.image;
        if(response.data.length > 0)   this.setState({"listOfProviders": response.data});
      })
  }

我要使用的 html 是：

  {this.state.listOfProviders.length > 0 ?
                      <tbody>
                        {this.state.listOfProviders.map((providerData,indx)=>
                          <tr>
                            <td className="font-weight-medium"> <img className="logo" src={doctor} alt="pam-logo" /> {providerData.provider.firstName} {providerData.provider.lastName} </td>
                            <td>{providerData.provider.email}</td>
                            <td>{providerData.provider.phoneNumber}</td>
                            <td>{(providerData.provider.specialities)}</td>
                            <td > {providerData.provider.qbid}</td>
                            <td> Mountain view,Ave </td>
                            <td><Icon icon={editIcon} width="20px"/>&nbsp;&nbsp;<Icon icon={deleteIcon} width="20px"/></td>

                        </tr>
                        )}
                      </tbody>

我需要 src 标签中的图像。

Answer 1

我猜医生变量范围界定问题。 当你声明这个 const doctor = response.data[0].provider.image; 在 componentDidMount 中，但您正在从另一个地方访问。

Answer 2

我不知道这里的用例。 但在我看来，在 componentDidMount() 中声明的变量在 render 方法中是不可访问的。 只需在构造函数中将该变量声明为类变量，然后您就可以使用this.doctor使用它。

或者，您可以从迭代器中读取它的值，而不是声明变量。 像， providerData.provider.image

Answer 3

在构造函数中创建状态变量

this.state = {
    doctor: ''
}

获得响应后，在componentDidMount使用 setState 更新图像 url

this.setState({doctor: response.data[0].provider.image})