如何使用React函数组件获取图像显示
如何使用React函数组件获取图像显示
提问于 2020-12-06 15:14:45
有人能看一下吗？图像未显示。保留关于谢谢的错误通知！
有人能看一下吗？图像未显示。保留关于谢谢的错误通知！
import React, { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
const [catImage, setCatImage] = useState("");
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
fetch("https://aws.random.cat/meow")
.then((res) => res.json())
.then((data) => {
setCatImage(catImage);
});
setIsLoading(false);
}, []);
if (isLoading) {
return <>Loading...</>;
}
return (
<div className="App">
<h1>Cat Images</h1>
<img
src={catImage}
onClick={(e) => setCatImage(e.target.value)}
alt="Cat Image"
/>
</div>
);
}回答 1
Stack Overflow用户
发布于 2020-12-06 16:02:05
API将发送以下内容：
{"file":"https:\/\/purr.objects-us-east-1.dream.io\/i\/UlyNwX7.jpg"}因此，下面的代码可以解决这个问题：
<img
src={catImage.file}
onClick={(e) => setCatImage(e.target.value)}
alt="Cat Image"
/>或者，您可以将状态设置为：
setCatImage(data.file);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65165618
复制相关文章
相似问题
腾讯云开发者
