Javascript 如何在react中获取json api中的图像？

所以我的问题是不言自明的，我正试图从这个api获取数据。现在一切正常，但我不知道如何在这个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;

import React，{Component}来自'React'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：[]，
isLoaded:false
};
}
componentDidMount（）{
取（'https://www.hatchways.io/api/assessment/students')
.then（res=>res.json（））
.然后（{students}）=>{
这是我的国家({
isLoaded：是的，
项目:学生,，
})
});
}
render（）{
const{isLoaded，items}=this.state；
如果（！已加载）{
返回加载数据。。。；
}
否则{
返回(
{items.map（item=>(

名称：{item.firstName+''+item.lastName+''}|
城市：{item.City}|
公司：{item.company}|
电子邮件：{item.email}|
id:{item.id}|
图片：{item.pic}

))};
);
}
}
}
导出默认应用程序；

从“React”导入React，{Component}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：[]，
isLoaded:false
};
}
componentDidMount（）{
取（'https://www.hatchways.io/api/assessment/students')
.then（res=>res.json（））
.然后（{students}）=>{
这是我的国家({
isLoaded：是的，
项目:学生,，
})
});
}
render（）{
const{isLoaded，items}=this.state；
如果（！已加载）{
返回加载数据。。。；
}
否则{
返回(
{items.map（item=>(

名称：{item.firstName+''+item.lastName+''}|
城市：{item.City}|
公司：{item.company}|
电子邮件：{item.email}|
id:{item.id}|

))};
);
}
}
}
导出默认应用程序；

当我试图获取图片时，我得到的链接与图片本身相反

---

这太明显了！非常感谢您的回答。如果您不想在段落标记中包含img标记，您可以在段落之后将p和img包装在div中

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}|
                                 <img src={item.pic}/>

                            </p>

                        ))};
                    </div>



                </div>

            );
        }

    }

}

export default App;

<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>

<img src={item.pic}/>