ReactJS Топор ios Запрос изображения - PullRequest
Новая
       3

ReactJS Топор ios Запрос изображения

0 голосов
/ 29 января 2020

enter image description here Я хочу сделать запрос к API с заголовками, имеющими UserID: Pass

Пример: 

const config = {
  headers: {
    'X-RPC-DIRECTORY': 'main',
    'X-RPC-AUTHORIZATION': 'userid:pass'
  }
};

const res = await axios.get(`http://192.00.00.60:8000/obj/e1b8c19e-fe8c-43af-800c-c9400c0e90/abc.jpg`, config );

Как я могу сделать это? Используя то же самое, я могу получить изображение в Почтальоне, но я хочу сделать это на странице.

Ответы [ 3 ]

0 голосов
/ 29 января 2020 
class Hello extends Component {
  state = {
    ulr: ''
  }
  componentDidMount() {
      const config = {
      headers: {
      'X-RPC-DIRECTORY': 'main',
      'X-RPC-AUTHORIZATION': 'userid:pass'
      }
    };

  axios.get(`http://192.00.00.60:8000/obj/e1b8c19e-fe8c-43af-800c-c9400c0e90/abc.jpg`, config ).then((response) => {
    this.setState({ url: response.data })
  }).catch((error) => {
    console.log(error)
  })
  }
  render() {
    return (
      <>
        <img src={this.state.url} alt="#" />
      </>
    )
  }
}

export default Hello;

Это должно ответить, как визуализировать изображение после извлечения изображения из API. Но я думаю, что что-то не так с URL. У меня есть несколько вопросов:

  1. Размещается ли внутренний API в нашей собственной системе?
  2. Является ли API общедоступным, потому что в противном случае мы не сможем получить к нему доступ.
  3. Вы задали другие заголовки или параметры муравья, которые должны быть отправлены вместе с запросом.
  4. Я пробовал с почтальоном, также не получил изображение в ответ, это дало мне ошибку.
0 голосов
/ 02 февраля 2020

Получил решение, так как ответ был типа содержимого: blob, поэтому я преобразовал BLOB-объект в base64 из FileReader API и затем отобразил его. 

const fileReaderInstance = new FileReader();
 fileReaderInstance.readAsDataURL(blob); 
 fileReaderInstance.onload = () => {
     base64data = fileReaderInstance.result;                
     console.log(base64data);
 }
0 голосов
/ 29 января 2020 
axios({
        method:'get',
        url,
        auth: {
            username: 'xxxxxxxxxxxxx',
            password: 'xxxxxxxxxxxxx'
        }
    })
    .then((response) => {

        //From here you can pass the response to local variable(state) and store/show image. 

       this.setState({ imageURL : response.data.image }); // change this as per your response 

    })
    .catch((error) => {
        console.log(error);
    });

render(){
return(
  <React.Fragment>
   <img src={this.state.imageURL} alt="image" />
  </React.Fragment>
)
}

Убедитесь, что у вас есть правильный тип метода, URL и данные приходят в ответ.

...