尽管我提供了 src 属性，但 Next.js 图像组件错误 src 丢失

Question

我向 UserCard 提供 src 属性，但随后我也收到以下错误。

错误

Unhandled Runtime Error
Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {"width":50,"height":50}

不同文件中的代码如下

在 UserCard.js 中

Unhandled Runtime Error
Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {"width":50,"height":50}

在阿凡达/Big.js

import Avatar from './Avatar';
import Link from 'next/link';

export default function UserCard({ user, border, onClick }) {
    function handleCloseAll() {
        if (onClick) onClick();
    }
    return (
        <div
            className={`d-flex p-2 align-items-center justify-content-between w-100 ${border}`}>
            <div onClick={handleCloseAll}>
                <Link href={`/profile/${user._id}`}>
                    <a className='d-flex align-items-center text-decoration-none'>
                        <Avatar.Big src={user.avatar} />
                        <div className='ml-1' style={{ transform: 'translateY(-2px)' }}>
                            <span className='d-block'>{user.username}</span>
                            <span
                                style={{
                                    opacity: 0.7
                                }}>
                                {user.fullname}
                            </span>
                        </div>
                    </a>
                </Link>
            </div>
        </div>
    );
}

在阿凡达/index.js

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);
    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>
    );
}

努力

如果我使用的是本机，<img />它会按预期工作

import Super from './Super';
import Big from './Big';
import Medium from './Medium';
import Small from './Small';
const Avatar = {
    Super: Super,
    Big: Big,
    Medium: Medium,
    Small: Small
};

export default Avatar;

更多细节

我正在使用 Nextjs 版本 11.0.1

更多见解的 Github 存储库链接：- https://github.com/KUSHAD/dogeshot

Answer 1

在 Big.js 中尝试

{ src && (
    <Image 
        className={styles.avatar}
        width={50}
        height={50}
        src={src}
        alt='Avatar'
    />
)}

仅当 src 有值时才输出图像。