图片不会出现在 Nextjs 和 Strapi 项目中

Question

目前我使用 NextJs 作为我的前端，使用 Strapi 作为我的 Web 应用程序的 CMS。我已将以下数据添加到我在 Strapi 中的 Citizenship 集合类型中：

这是我在 NextJs 端的代码：

export default function Citizenship({ posts }) {
  return (
    <>
    <div style={{textAlign:"center", marginTop:"20px", fontSize:"25px", color:"#0E2043", fontWeight: "500"}}>CITIZENSHIP</div>

        <div class="flexbox-container" style={{margin:"70px", marginTop:"0px"}}>
        {
          posts &&
          posts.map((post) => (
            <div style={{ padding: "40px" }}>
          <div class="citizen-item" key={post.id}>
            <div className="container6">
              <img
                style={{ height: "50%", width: "100%" }}
                src={post.Thumbnail.name}
              />
              <div style={{textAlign:"center", color:"#E3AB50", padding:"10px", fontSize:"20px"}}>{post.Title}</div>
              <div style={{textAlign:"center", color:"#000", padding:"10px", fontSize:"15px"}}>Access to {post.Countries} countries</div>
              <div style={{display:"flex", justifyContent:"center", paddingTop:"20px", paddingBottom:"10px"}}>
              <button class="findButton">FIND OUT MORE</button>
              </div>
            </div>
          </div>
        </div>        
        ))}
        </div>
    </>
  )
}

export async function getStaticProps() {
  const res = await fetch('http://localhost:1337/citizenships');
  const posts = await res.json();
  
  return {
    props: {posts},
  }
}

在我的输出中，除了图像之外，一切都很好，它只显示我的第一张图像，而其他所有图像都给出 404。我该如何解决这个问题？

Answer 1

使用 console.log(post) 并在浏览器控制台中找到您的 post returns 。如果它提供缩略图，则使用它。否则使用它提供的内容。

Answer 2

对该路线使用邮递员和填充查询（最后添加 ?populate=* ），您将获得完整的位置您的图像并使用它。

图片不会出现在 Nextjs 和 Strapi 项目中

Images wont show up in Nextjs and Strapi project

reactjs

strapi

next.js

nextjs-image