Search code examples
reactjsnext.jsstrapinextjs-image

Images wont show up in Nextjs and Strapi project

Currently I'm using NextJs as my frontend and Strapi as my CMS for my web application. I've added the following data to my Citizenship collection type in Strapi: enter image description here

This is my code in the NextJs side:

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},
  }
}

In my output, everything is coming fine except for the Image where it is only showing my first image and all the others are giving a 404. How do I fix this? enter image description here

Solution

  • Use console.log(post) and find what your post returns in your browser console . If it gives Thumbnail then use it .Or else use what it gives .