How to fetch images in json api in react?

Question

So my problem is quite self explanatory I'm trying to fetch data from this api https://www.hatchways.io/api/assessment/students. Now everything is working fine but I cannot figure out how to fetch the picture in this API. When I try to fetch the picture, I am getting the link as oppose to the picture itself. I think I would need to somehow use the src tag inside the loop but I'm not sure how to implement that. I will post my code below and as always I appreciate your help as I love learning more about 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;

pavi2410 · Accepted Answer · 2019-01-27 18:24:32Z

2

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>

To display images from the URL, use img tag.

<img src={item.pic}/>

answered Jan 27, 2019 at 18:24

pavi2410

1,2952 gold badges12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

manas · Accepted Answer · 2019-01-27 18:21:01Z

0

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;

answered Jan 27, 2019 at 18:21

manas

6,43010 gold badges50 silver badges59 bronze badges

2 Comments

testprogrammer Over a year ago

This was so obvious! Thanks so much for your answer.

manas Over a year ago

if you don't want img tag inside paragraph tag you can do that after the paragraph also by wrapping both p and img inside a div

Collectives™ on Stack Overflow

How to fetch images in json api in react?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related