Next.js中如何将API返回的图片URL渲染到各Bootstrap卡片img标签

核心修改逻辑很直接：你当前代码把列表遍历逻辑和静态卡片拆成了两部分，只要把卡片组件整体移入Array.map()的遍历回调中，将接口返回的每条数据字段替换掉卡片里的静态占位内容即可。

具体调整步骤 #

• 删除原有{test.map(tes=>(<div key={tes.id}><h1>{tes.url}</h1></div>))}这段只渲染URL的遍历代码
• 删除写在遍历逻辑外层的静态Bootstrap卡片代码
• 在原遍历代码的位置，调用test.map()遍历接口返回的数组，每轮遍历返回一个完整的Bootstrap卡片结构，将遍历拿到的当前项字段绑定到卡片对应属性上
• 可选：外层套Bootstrap的网格布局类，实现多列卡片排布效果，和参考示例效果对齐

修改后完整代码 #

export const getStaticProps=async ()=>{
  const res= await fetch('https://jsonplaceholder.typicode.com/photos');
  const data = await res.json();
  // 接口默认返回5000条数据，这里截取前12条做展示，避免全量渲染卡顿
  return {
    props:{test:data.slice(0, 12)}
  }
}

function Home({test}){
  return (
    <div className="container py-4">      
      <ul className="nav nav-tabs mb-4">
        <li className="nav-item">
          <a className="nav-link active" aria-current="page" href="#">
            Active
          </a>
        </li>
      </ul> 
      {/* 网格布局实现响应式多列卡片 */}
      <div className="row g-4">
        {test.map(tes=>(
          <div className="col-12 col-md-6 col-lg-4" key={tes.id}>
            <div className="card h-100" style={{ width: "100%" }}>
              {/* 绑定接口返回的图片地址，thumbnailUrl是缩略图加载更快，也可以换成tes.url用原图 */}
              <img src={tes.thumbnailUrl} className="card-img-top" alt={tes.title} />
              <div className="card-body">
                {/* 绑定接口返回的图片标题作为卡片标题 */}
                <h5 className="card-title">{tes.title}</h5>
                <p className="card-text">
                  图片ID：{tes.id}，所属相册ID：{tes.albumId}
                </p>
                <a href={tes.url} target="_blank" rel="noreferrer" className="btn btn-primary">
                  查看原图
                </a>
              </div>
            </div> 
          </div>
        ))}
      </div>
    </div>           
  )
}
export default Home;

注意点 #

• React/Next.js 要求自定义组件名必须大写开头，建议将原来的小写home组件改名为Home，避免解析异常
• 接口返回的图片字段中，url是600600的原图地址，thumbnailUrl是150150的缩略图地址，列表场景优先用缩略图提升加载速度
• 给卡片加h-100类可以保证同一行的卡片高度统一，排版更整齐

内容的提问来源于stack exchange，提问作者aas3