NextJS从API拉取图片报错 TypeError: 无法读取undefined的map属性

问题1：images变量为undefined #

getStaticProps 是Next.js专为pages目录下的页面组件提供的静态数据获取方法，如果你写的这个Images是普通业务组件，存放在非pages目录下，该方法不会被框架自动执行，组件自然接收不到images属性，打印就会是undefined。
解决方法：

• 如果这是页面组件，确认文件放在项目根目录的pages文件夹内
• 如果这是普通自定义组件，将getStaticProps的接口请求逻辑迁移到调用它的父页面组件中，拿到数据后再通过props传给Images组件
• 调试时可先在getStaticProps内打印接口返回的images内容，确认服务端能正常拉取到接口数据

问题2：Image组件缺少src属性报错 #

即便images能正常拿到值，还有两种可能触发该报错：

1. 接口返回结构不符合预期
   你调用的接口返回的是酒店信息数组，单条返回数据内没有直接的url字段，你需要先打印完整的接口返回结构，找到图片地址对应的正确字段路径再取值。
2. next/image必填参数缺失
   next/image默认要求必须传入width和height属性，你当前仅传入了src，不符合组件要求。如果需要自适应尺寸，可以使用fill属性，同时给父容器添加position: relative样式。

问题3：外部域名图片加载配置遗漏 #

你需要加载其他域名下的图片时，要先在项目根目录的next.config.js中添加图片域名白名单配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['obmng.dbm.guestline.net'],
  },
}

module.exports = nextConfig

修改配置后需要重启项目才会生效。

内容的提问来源于stack exchange，提问作者someone