Next.js Image组件已传入src属性仍提示src缺失报错如何解决？

• 你使用的Next.js 11版本中，next/image 组件对必填的src参数校验远严格于原生<img>标签：原生标签允许src为undefined/null/空值，仅会显示破损图标不会抛错；但next/image只要接收到空的src就会直接抛出「缺失src属性」的运行时错误。
• 出现该报错是因为初始渲染时user.avatar为空值：大概率是user数据是异步请求获取的，第一次渲染组件时user还未加载完成，导致传入Avatar.Big的src为undefined。

方案1：为src添加兜底逻辑（推荐） #

在Avatar/Big.js中添加空值判断，src为空时返回占位内容或默认头像：

import Image from 'next/image';
import { useSelector } from 'react-redux';
import styles from '../../../styles/avatar.module.css';
export default function Big({ src }) {
    const { darkMode } = useSelector(state => state);
    // src为空时直接返回null，也可以替换为默认头像
    if (!src) return null;
    // 也可以使用默认头像兜底：src = src || '/default-avatar.png'，默认头像放在public目录下即可
    return (
        <div
            style={{
                filter: darkMode ? 'invert(1) hue-rotate(180deg)' : 'invert(0)'
            }}>
            <Image
                className={styles.avatar}
                width={50}
                height={50}
                src={src}
                alt='Avatar'
            />
        </div>
    );
}

方案2：优化父组件渲染时机 #

在调用UserCard的父组件中添加条件渲染，确保user数据加载完成后再渲染组件：

// 父组件示例
{user?._id && <UserCard user={user} border={border} onClick={onClick} />}

方案3：传值时添加兜底 #

在UserCard中调用Avatar.Big时直接添加默认值兜底：

<Avatar.Big src={user.avatar || '/default-avatar.png'} />

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