0

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

JJM50
  • 467
  • 1
  • 7
  • 20
  • What does `post.Thumbnail` return? Is it a valid image URL? You can also check the Network tab in dev tools, and see why the image requests are failing. – juliomalves Aug 16 '21 at 08:00
  • @juliomalves Hey, so I tried checking my network tab, now I'm getting a 404 for all my images except the first one – JJM50 Aug 16 '21 at 08:15
  • What do the URLs for the images that are 404ing look like? Are they valid URLs? – juliomalves Aug 16 '21 at 08:27
  • Yes, so for my 1st pictures request URL im getting http://localhost:3000/countries1.png which is working fine. And for my second image im getting http://localhost:3000/countries2.png, but thats showing a 404 – JJM50 Aug 16 '21 at 08:45

2 Answers2

0

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 .

Arkadeep Nag
  • 26
  • 3
  • Hey, I used console.log and changed post.Thumbnail to post.Thumbnail.name, but now only first image is showing – JJM50 Aug 16 '21 at 08:14
  • You can check whether there is post.Thumbnail.image is there or not – Arkadeep Nag Aug 16 '21 at 09:42
  • Thumbnail: { id: 2, name: 'michael-marangoni-3f.jpg', alternativeText: '', caption: '', width: 1920, height: 1080, formats: { thumbnail: [Object], large: [Object], medium: [Object], small: [Object] }, hash: 'michael_marangoni_3f_f879a90f93', ext: '.jpg', mime: 'image/jpeg', url: '/uploads/michael_marangoni_3f_f879a90f93.jpg', previewUrl: null, provider: 'local', provider_metadata: null, created_at: '2021-08-16T07:04:17.247Z', updated_at: '2021-08-16T07:04:17.267Z' } – JJM50 Aug 16 '21 at 10:12
  • you therefore use post.Thumbnail.url – Arkadeep Nag Aug 16 '21 at 10:50
  • Making it .url removed all the images again. I read somewhere I can use next/Image, but how can I use that here? – JJM50 Aug 16 '21 at 11:01
  • This can be because the second images are given with different name . Like posts.thumbnail.anything . you can use the src as src={post.Thumbnail.name || post.Thumbnail. url || post.Thumbnail.path || post.Thumbnail.hash+post.Thumbnail.ext} – Arkadeep Nag Aug 16 '21 at 13:05
  • Tried this too. Could you possibly replicate this and see if you are able to achieve it with this code? – JJM50 Aug 16 '21 at 13:32
  • @JJM50 I have run all possible methods and got successful results. To try this more informatively you can dm me at https://instagram.com/theoverpedia – Arkadeep Nag Aug 17 '21 at 06:13
  • Hey, so I tried src={`http://localhost:1337${post.Thumbnail.url}`} and it worked out. Thanks for the help. I do have a new doubt regarding this: https://stackoverflow.com/questions/68812274/having-a-limit-to-the-amount-of-strapi-data-shown – JJM50 Aug 17 '21 at 06:32
  • O that's really amazing – Arkadeep Nag Aug 17 '21 at 07:07
0

use postman for that route with populate query (at the end add "?populate=*") and u will get the complete position of the url of you image and use it .

Jai Lakhmani
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 27 '22 at 14:11