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

Question

我正在尝试显示来自狗 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);

Answer 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标记需要string类型(URL(的src道具，但您正在传递它object。您应该改用这样的getImage：

getImage(response.data.message);

Answer 2

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

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

从 mdn：

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