json - 在 Reactjs 中，如何从已经放置图像链接的 json 文件中返回图像？

Question

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
}

我在这里做错了什么？

Answer 1

这是应该做的:

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

export default App;