所以我的问题是不言自明的,我正在尝试从这个 api https://www.hatchways.io/api/assessment/students 获取数据。现在一切正常,但我不知道如何在这个 API 中获取图片。当我尝试获取图片时,我得到的链接与图片本身相反。我想我需要以某种方式在循环内使用 src 标签,但我不确定如何实现它。我将在下面发布我的代码,并且一如既往地感谢您的帮助,因为我喜欢了解更多有关 React 的知识。
import React, {Component} from 'react';
class App extends Component{
constructor(props){
super(props);
this.state = {
items:[],
isLoaded: false
};
}
componentDidMount(){
fetch('https://www.hatchways.io/api/assessment/students')
.then(res=> res.json())
.then(({ students }) => {
this.setState({
isLoaded: true,
items: students,
})
});
}
render(){
const {isLoaded, items} = this.state;
if(!isLoaded){
return <div>loading data...</div>;
}
else{
return(
<div className="Data">
<div>
{items.map(item=>(
<p key={item.id}>
name:{item.firstName +' '+ item.lastName +' '} |
City:{item.city} |
company:{item.company} |
email:{item.email} |
id:{item.id}|
picture:{item.pic}
</p>
))};
</div>
</div>
);
}
}
}
export default App;
最佳答案
When I try to fetch the picture, I am getting the link as oppose to the picture itself.
<p key={item.id}>
name:{item.firstName +' '+ item.lastName +' '} |
City:{item.city} |
company:{item.company} |
email:{item.email} |
id:{item.id}|
picture:{item.pic} <<<<<<< You just print it as text.
</p>
要显示 URL 中的图像,请使用 img
标记。
<img src={item.pic}/>
关于javascript - 如何在react中获取json api中的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54391372/