Question

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

2021-07-15

196

json reactjs

我尝试从 .json 文件加载图像，但图像无法加载。仅加载了文本和数字

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;

Answer 2

您可以使用类似这样的内容：


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

Answer 3

您需要将路径放入 src，但您的 playerDetails 容器只是一堆 li 标签，您需要在 img 标签上使用 map() 并将 data.img 路径放入 src。

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

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

})

>