es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • 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 se puede extraer la imagen de la API en Next.js – TypeError: No se pueden leer las propiedades de indefinido (leyendo ‘map’) NEXTJS.

13 Jul, 2023 Programación

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
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que falta la propiedad src en el componente Image. Asegúrate de que el objeto image que se está mapeando tenga una propiedad url y que no sea undefined. Además, como estás usando el componente next/image, asegúrate de pasar la propiedad src a él en lugar de pasarla directamente a la etiqueta img.

    Adicionalmente, es importante tener en cuenta que next/image requiere que se pasen las propiedades de altura y anchura. Entonces, tu etiqueta Image se podría actualizar de la siguiente manera:

    <image src="{image.url}" width="{tuAnchura}" height="{tuAltura}"></image>

    donde tuAnchura y tuAltura 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:

    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 function Images({ images }) {
    return (
        <div>
            {images?.map((image) => (
                <image src="{image.url}" width="{tuAnchura}" height="{tuAltura}"></image>
            ))}
        </div>
    );
}

    Reemplaza tuAnchura y tuAltura por valores apropiados para tu imagen.

Comments are closed.