I am trying to fetch an image from this API by using getStaticProps but I can't seem to get it.
If I add a '?' to the code like this then in the log it says 'undefined'. Why can't I fetch it?
<div>
{hotelPics.map((hotelpic)=> (
<Image src={hotelpic.url} />
))}
</div>
This is the code:
import Image from 'next/image';
import React from 'react'
function Images({hotelPics }) {
console.log(hotelPics);
return (
<div>
{hotelPics.map((hotelpic)=> (
<Image src={hotelpic.url}/>
))}
</div>
)
}
export async function getStaticProps() {
const res= await fetch ('https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG')
const hotelPics = await res.json()
return {
props: {
hotelPics,
},
}
}
export default Images
getStaticProps are "compiling" at build time, so you need to check isFallback variable
Also, you have nested images array in hotelPics array returned from getStaticProps
import Image from 'next/image';
import { useRouter } from 'next/router';
import React from 'react'
function Images({hotelPics}) {
const router = useRouter();
if (router.isFallback) {
return <h1>Loading...</h1>;
}
//console.log(hotelPics.images)
return (
<div>
{hotelPics.map((hotelpic)=> (
hotelpic.images.map((image) => (
//replace here with Image tag
<p key={image.url}>{image.url}</p>
)
)
))}
</div>
)
}
export async function getStaticProps() {
const res= await fetch ('https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG')
const hotelPics = await res.json()
return {
props: {
hotelPics,
},
}
}
export default Images