如何在`＆lt; img src =; quord'中添加URL``在不同的卡片中显示图像？

Question

我在next.js中使用Bootstrap卡;我观看了一个有关在next.js中获取API的教程，我的代码看起来像这样：

 export const getStaticProps=async ()=>{

  const res= await fetch('https://jsonplaceholder.typicode.com/photos');
  const data = await res.json();
  return {
    props:{test:data}
  }
 }








 function home({test}){
  return (
<div>      
  <ul className="nav nav-tabs">
    <li className="nav-item">
      <a className="nav-link " aria-current="page" href="#">
        Active
      </a>
    </li>

    
  </ul> 
  {test.map(tes=>(<div key={tes.id}><h1>{tes.url}</h1></div>))}
  <div className="card" style={{ width: "18rem" }}>
    <img src="..." className="card-img-top" alt="..." />
    <div className="card-body">
      
      <h5 className="card-title">Card title</h5>
      <p className="card-text">
        Some quick example text to build on the card title and make up the bulk of
        the card's content.
      </p>
      <a href="#" className="btn btn-primary">
        Go somewhere
      </a>
    </div>
  </div> 
</div>           
      
    )
 
 }
 export default home;

此代码{test.map（tes =＆gt;（＆lt;（＆lt; div） key = {tes.id}＆gt;＆lt; h1＆gt; {tes.url}＆lt;/h1＆gt;＆lt;＆lt;/div＆gt;））}}在卡外显示了url;如何在＆lt; img src =“ ...”中添加URL以在不同的卡中显示图像？

image

Answer 1

{test.map(tes=>(<div key={tes.id}>
  <div className="card" style={{ width: "18rem" }}>
    <img src={tes.url} className="card-img-top" alt="..." />
    <div className="card-body">
      
      <h5 className="card-title">Card title</h5>
      <p className="card-text">
        Some quick example text to build on the card title and make up the bulk of
        the card's content.
      </p>
      <a href="#" className="btn btn-primary">
        Go somewhere
      </a>
    </div>
    </div> 
</div>))}

您需要了解地图如何工作代码的问题是您要返回H1，但是您需要返回完整的卡部门，我建议您创建一个卡组件，然后通过道具

Answer 2

您使用地图方法在“ Div” Elems中显示了URL列表。

使用IMG标签而不是DIV进行相同的操作：

{test.map(tes =>
    (<img src={tes.url} className="card-img-top" alt="..." />)
)}