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

Question

I use axios to get data from the api, now I need to display the image in the td tag in HTML, the text response are working fine but the image is not displaying.

my request code is:

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});
      })
  }

My html to use is:

  {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>

I need image in src tag.

Answer 1

I guess doctor vairable scoping problem. As you are declaring this const doctor = response.data[0].provider.image; in componentDidMount but you are accessing from another place.

Answer 2

I don't know the use case here. But in my opinion, the variable declared in the componentDidMount() is not accessible in the render method. Just declare that variable as class variable in the constructor and then you can use it using this.doctor .

Or instead of declaring the variable you can just read it's value from the iterator. Like, providerData.provider.image

Answer 3

create a state variable in constructor

this.state = {
    doctor: ''
}

after geting response update the image url using setState inside componentDidMount

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