Next.js中通过对象数组渲染Image组件显示空白页求助

我用Next.js开发一个点击按钮后显示的图片容器，通过对象数组为Image组件传递src属性，但页面始终显示空白，已排查一小时，请问哪里操作出错了？

原代码 #

import React from 'react'
import Image from 'next/image'
import "./work.scss"

function Work() {
    const workObject = [
        {
            path: "/work/1.webp",
            desc:"Maccabi Tzair"
        },
        {
            path: "/work/2.webp",
            desc:"Maccabi Tzair"
        },
        {
            path: "/work/3.webp",
            desc:"Maccabi Tzair"
        },
        {
            path: "/work/4.webp",
            desc:"Maccabi Tzair"
        },
        {
            path: "/work/6.webp",
            desc:"Maccabi Tzair"
        },
        {
            path: "/work/7.webp",
            desc:"Maccabi Tzair"
        },
        {
            path: "/work/1.webp",
            desc:"Maccabi Tzair"
        },
    ]
  return (
      <div className='content'>
          {workObject.map((obj) => {
           <Image src={obj.path} alt='' height={500} width={400}/>
       })}
    </div>
  )
}

export default Work

问题原因及修复方案 #

1. map函数未返回渲染元素 #

你的map回调使用了大括号，但没有返回Image组件，React无法获取到要渲染的元素，直接导致页面空白。

修复方式：

• 改用箭头函数的隐式返回（去掉大括号，或用括号包裹组件）
• 或者在大括号内添加return语句显式返回组件

2. 缺少唯一key属性 #

React列表渲染时，必须给每个元素分配唯一的key属性，这能避免React警告，同时提升列表渲染的性能与稳定性。

3. 验证图片路径与public目录结构 #

Next.js的Image组件使用相对路径时，图片必须放在项目根目录的public文件夹下。比如你写的/work/1.webp，需要确保public/work/1.webp文件真实存在。

修正后的代码 #

import React from 'react'
import Image from 'next/image'
import "./work.scss"

function Work() {
    const workObject = [
        {
            id: 1,
            path: "/work/1.webp",
            desc:"Maccabi Tzair"
        },
        {
            id: 2,
            path: "/work/2.webp",
            desc:"Maccabi Tzair"
        },
        {
            id: 3,
            path: "/work/3.webp",
            desc:"Maccabi Tzair"
        },
        {
            id: 4,
            path: "/work/4.webp",
            desc:"Maccabi Tzair"
        },
        {
            id: 5,
            path: "/work/6.webp",
            desc:"Maccabi Tzair"
        },
        {
            id: 6,
            path: "/work/7.webp",
            desc:"Maccabi Tzair"
        },
        {
            id: 7,
            path: "/work/1.webp",
            desc:"Maccabi Tzair"
        },
    ]
  return (
      <div className='content'>
          {/* 使用隐式返回并添加唯一key */}
          {workObject.map((obj) => (
              <Image 
                  key={obj.id} 
                  src={obj.path} 
                  alt={obj.desc} 
                  height={500} 
                  width={400}
              />
          ))}
      </div>
  )
}

export default Work

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