Как использовать изображение в API получить по запросу ios в тегах html в ReactJS? - PullRequest
Новая
       5

Как использовать изображение в API получить по запросу ios в тегах html в ReactJS?

0 голосов
/ 20 февраля 2020

Я использую топор ios для получения данных из API, теперь мне нужно отобразить изображение в теге td в HTML, текстовый ответ работает нормально, но изображение не отображается.

мой код запроса: 

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>

Мне нужно изображение в теге sr c.

Ответы [ 3 ]

0 голосов
/ 20 февраля 2020

Я не знаю варианта использования здесь. Но, на мой взгляд, переменная, объявленная в componentDidMount (), недоступна в методе рендеринга. Просто объявите эту переменную как переменную класса в конструкторе, и затем вы можете использовать ее, используя this.doctor.

Или вместо объявления переменной вы можете просто прочитать ее значение из итератора. Как, providerData.provider.image

0 голосов
/ 20 февраля 2020

создать переменную состояния в конструкторе 

this.state = {
    doctor: ''
}

после получения ответа обновите URL-адрес изображения с помощью setState внутри componentDidMount

this.setState({doctor: response.data[0].provider.image})
0 голосов
/ 20 февраля 2020

Я полагаю, доктор осматривает проблему с областью видимости. Поскольку вы объявляете это const doctor = response.data [0] .provider.image; в componentDidMount, но вы получаете доступ из другого места.

...