Javascript 如何在ReactJS的html标记中使用api-get-by-axios请求中的图像？

我使用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>

{this.state.listOfProviders.length>0？
{this.state.listOfProviders.map（（providerData，indx）=>
{providerData.provider.firstName}{providerData.provider.lastName}
{providerData.provider.email}
{providerData.provider.phoneNumber}
{（providerData.provider.specialities）}
{providerData.provider.qbid}
山景大道
)}

---

我需要src标记中的图像。

我想医生可能存在范围界定问题。当您在componentDidMount中声明此const doctor=response.data[0].provider.image；时，但您是从另一个地方访问的。

我不知道这里的用例。但我认为，在componentDidMount（）中声明的变量在render方法中不可访问。只需在构造函数中将该变量声明为类变量，然后就可以使用

this.doctor

---

或者，您可以从迭代器中读取变量的值，而不是声明变量。例如，

providerData.provider.image

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

this.state = {
    doctor: ''
}

获取响应后，使用setState inside

componentDidMount

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

---

即使我直接给出，它也不起作用。可能有一些关于图像的特定内容，我认为你的图像有效。我的意思是我声明了这一点，它起作用const doctor=“”；通过直接提供lso not WORKING，有关图像的某些特定信息。如果图像是有效的URL，它将作为图像呈现。只需调试其值，并检查控制台，以查看是否存在与未加载图像相关的错误。控制台正在显示图像名称。URL没有问题复制图像并尝试在新选项卡中获取它你的浏览器。也尝试在一个标记或其他东西中呈现呈现函数中的URL值。看看这个例子，它有带图像的虚拟api，我已经修改了类似你的代码来显示图像及其工作状态