无法从 nextjs 中的 api 获取图像-TypeError：无法读取未定义的属性（读取“地图”）NEXTJS

Posted 2023-03-06

【中文标题】无法从 nextjs 中的 api 获取图像-TypeError：无法读取未定义的属性（读取“地图”）NEXTJS

【英文标题】：can't fetch image from api in nextjs - TypeError: Cannot read properties of undefined (reading 'map') NEXTJS

【发布时间】：2022-01-12 00:31:21

【问题描述】：

我似乎无法从 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

【问题讨论】：

所以图像加载到你身边？这只是标准的 webpack 错误

【参考方案1】：

检查images 是数组。

并分配一个默认值。

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

或

function Images( images = [] ) ...

【讨论】：

数组为空

这会引发错误 // getStaticProps return props: images ?? [], ,

【参考方案2】：

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

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
  ,
;

以下是图片：

【讨论】：

抛出这个错误 - TypeError: Cannot read properties of undefined (reading 'length')

谢谢你的工作！