React/Axios - 从 API 获取损坏的图像答案

【问题标题】：React/Axios - Getting broken image from APIReact/Axios - 从 API 获取损坏的图像
【发布时间】：2020-04-29 03:15:49
【问题描述】：

我正在尝试显示来自 dog API URL 的随机图像。

当前显示的是损坏的图像。我正在使用 Axios 和 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);

【问题讨论】：

标签： reactjs typescript axios react-hooks

【解决方案1】：

我刚刚检查过，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）的 prop，但您传递给它的是 object。你应该像这样使用getImage：

getImage(response.data.message);

【讨论】：

欣赏它，我已经改变了你建议的一切，仍然没有区别。
getImage(response.data.message) 为我做了，感谢您的帮助。
啊，是的，我忘记了关于 Axios 的事情。我会更新我的答案。如果对您有用，请接受我的回答。

【解决方案2】：

Check the API response，它没有data 字段。它有一个带有图像 URL 的 message 字段，这就是您应该使用的。

您收到的 eslint 警告与图像不显示无关。 img 标签应该有 alt 属性。你只有src。

From mdn:

alt 属性包含图像的文本描述，这不是强制性的，但对可访问性非常有用

【讨论】：

好的，我添加了 alt。现在根本没有错误/问题。而且，当我将data 更改为message 时，反之亦然，没有区别或错误消息。