CODEWITHSUNDEEP
jsonreactjs
A K M Intisar Islam
A K M Intisar Islam

Reputation: 55

In Reactjs, how can I return images from a json file where I already put image links?

I'm trying to load images from my .json file, but the images do not load. Only text and numbers are being loaded

function App() {
    const playerDetails = playerInfo.map(data =><li>{data.img}</li>)
    
  return (
    <div className="App"> 
        <img src={playerDetails} alt=""></img>
    </div>
  );
}

export default App;

{
  "id":1,
  "name":"Andre Silva",
  "current_club":"Eintracht Frankfurt",
  "img":"https://www.sportbible.com/cdn-cgi/image/width=648,quality=70,format=webp,fit=pad,dpr=1/https%3A%2F%2Fs3-images.sportbible.com%2Fs3%2Fcontent%2F3f9fb96660afef4902e06364787b3237.jpg",
  "salary":7413507
}

What I'm doing wrong here?

Upvotes: 2

Views: 196

Answers (3)

YoYee
YoYee

Reputation: 23

you need put path to src, but your playerDetails container just bunch of li tags , you need use map() on img tag and put data.img path to src.

{ playerInfo.map( (data, id) => {

  return(
        <React.Fragment key= {id}>
           <li>
              <img src={data.img}>
           </li>
        </React.Fragment>
    )

})

}

Upvotes: 0

Javvy7
Javvy7

Reputation: 146

This is should do it:

function App() {
    
  return (
    <div className="App">
     {
        playerInfo.map(data => ( 
           <li key={data.id}>
             <img src={data.img} alt=""></img>
          </li>
       ))
     }
    </div>
  );
}

export default App;

Upvotes: 2

kup
kup

Reputation: 819

You can use something like this:


{
playerInfo.map((player, key) => {
    return <div key={key}> 
        <img src={player.img.toString()} alt=""></img>
    </div>
})
}

Upvotes: 0

Related Questions