can't fetch image from api in nextjs - TypeError: Cannot read properties of undefined (reading 'map') NEXTJS

Question

我似乎无法从 api 获取图像，不确定发生了什么。我在这里错过了什么？

我也一直在浏览器中收到此错误。

图像缺少必需的“src”属性。确保将 props 中的“src”传递给 next/image 组件。已收到： {} 空

console.log 中的图像生成未定义。

function Images({images}) {
 
    
    return (
        <div>
    {images?.map((image)=> (
        <Image src={image.url}/>
    ))}    
        </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

Answer 1

你有一个嵌套结构，你应该这样做。（嵌套地图）

function Images({ data }) {
  return (
    <div>
      {data?.length &&
        data.map((item) => item.images.map((image) => <img src={image?.url || ''} height={100} width={100} />))}
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default Images;

更新：

如果 next/image 有问题，您应该在 next.config.js 文件中添加配置，如下所示：

module.exports = {
  ...otherConfigs,
  images: {
    domains: ['www.HOSTNAME.com'], // hostname of the img url
  },
};

图片如下：

Answer 2

检查images是数组。

并分配一个默认值。

// getStaticProps
return {
    props: {
        images : images ?? [],
    },
}

或

function Images({ images = [] }) {...}

can't fetch image from api in nextjs - TypeError: Cannot read properties of undefined (reading 'map') NEXTJS

can't fetch image from api in nextjs - TypeError: Cannot read properties of undefined (reading 'map') NEXTJS

fetch-api

next.js

nextjs-image