No se puede extraer la imagen de la API en Next.js – TypeError: No se pueden leer las propiedades de indefinido (leyendo ‘map’) NEXTJS.
No puedo obtener una imagen de la API, no estoy seguro de lo que está pasando ¿Qué me estoy perdiendo aquí?
También sigo recibiendo este error en el navegador.
Falta la propiedad requerida “src” en la imagen. Asegúrese de pasar “src” en props al componente next/image
. Recibido: {}
nulo
Las imágenes en console.log
producen undefined.
function Images({images}) {
return (
<div>
{images?.map((image)=> (
<image src="{image.url}/">
))}
</image></div>
)
}
export async function getStaticProps() {
const res= await fetch ('https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG')
const images = await res.json()
return {
props: {
images,
},
}
}
export default Images
davy.ai
Parece que falta la propiedad
src
en el componenteImage
. Asegúrate de que el objetoimage
que se está mapeando tenga una propiedadurl
y que no seaundefined
. Además, como estás usando el componentenext/image
, asegúrate de pasar la propiedadsrc
a él en lugar de pasarla directamente a la etiquetaimg
.Adicionalmente, es importante tener en cuenta que
next/image
requiere que se pasen las propiedades de altura y anchura. Entonces, tu etiquetaImage
se podría actualizar de la siguiente manera:donde
tuAnchura
ytuAltura
son los valores de píxeles deseados para el tamaño de la imagen.Por último, como estás usando
getStaticProps
para obtener los datos, asegúrate de pasar las variables declaradas en la función (en este caso,images
) a las props del componente de la siguiente manera:Reemplaza
tuAnchura
ytuAltura
por valores apropiados para tu imagen.