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

user_13983103 0
Viewed 79

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?

reactjs json
3 Answers

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

You can use something like this:


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

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

})

}

user_52249750
Related