React / Ax ios - Получение сломанного изображения из API - PullRequest
Новая
       4

React / Ax ios - Получение сломанного изображения из API

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

Я пытаюсь отобразить случайное изображение с URL-адреса собаки API.

В настоящее время отображается поврежденное изображение. Я использую Ax ios и React и в настоящее время не вижу никаких ошибок / проблем в eslint.

Я хочу нажать кнопку, чтобы отобразить случайное изображение из API, но оно просто отображает alt текст с разбитым изображением.

КОД 

import * as React from "react";
import { render } from "react-dom";
import axios from "axios";
import "./styles.css";

function App() {

  const [image, getImage] = React.useState("");

  function btnClick(event) {

    event.preventDefault();

    axios
        .get("https://dog.ceo/api/breeds/image/random")
        .then(response => {
            getImage({ imgs: response.message });
        })
        .catch(err => {
            console.log("Error happened during fetching!", err);
        });
  }

  return (
    <div className="App">
      <img src={image} alt="broken"/>
      <button className = "Button" onClick = {btnClick}>Click</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Ответы [ 2 ]

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

Я только что проверил, и ответ API структурирован так: 

{
  "message": "https://images.dog.ceo/breeds/affenpinscher/n02110627_5361.jpg",
  "status": "success"
}

Когда вы звоните getImage (который, на мой взгляд, должен называться setImage), вот так: 

getImage({ imgs : response.data.message });

Значение вашей переменной состояния с именем image изменяется с string на object со следующей структурой: 

{
    imgs : "https://images.dog.ceo/breeds/affenpinscher/n02110627_5361.jpg"
}

Однако тег img ожидает src реквизит типа string (URL), но вы передаете его object. Вы должны использовать getImage вот так: 

getImage(response.data.message);
0 голосов
/ 12 января 2020

Проверьте ответ API , в нем нет поля data. В нем есть поле message с URL-адресом изображения, и это то, что вы должны использовать.

Полученное предупреждение об уходе не имеет ничего общего с изображением, которое не отображается. Теги img должны иметь свойство alt. У вас есть только src.

От mdn :

Атрибут alt содержит текстовое описание изображения, которое не является обязательным, но невероятно полезно для доступности

...