Estoy tratando de obtener una imagen de esta API usando getStaticProps pero parece que no puedo obtenerla.
Si agrego un '?' al código como este, en el registro dice 'indefinido'. ¿Por qué no puedo ir a buscarlo?
<div> {hotelPics.map((hotelpic)=> ( <Image src={hotelpic.url} /> ))} </div>Este es el código:
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 ImagesgetStaticProps se están "compilando" en el momento de la compilación, por lo que debe verificar la variable isFallback
Además, tiene una matriz de images anidadas en la matriz hotelPics devuelta por 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