Next.js 虽然我提供了 src 属性，但图像组件错误 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


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

在Avatar/Big.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>
    );
}

在Avatar/index.js

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;

努力

如果我使用的是原生 <img /> 它会按预期工作


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

更多详情

我正在使用 Nextjs 版本 11.0.1

Github 存储库 Link 以获得进一步的见解：- https://github.com/KUSHAD/dogeshot

Answer 1

在Big.js试试

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

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

Answer 2

在Avatar/Big.js 你应该为 src 使用初始值。在第一次渲染中，值为空添加此代码：

import Image from 'next/image';
import {useState,useEffect} from 'react';
import { useSelector } from 'react-redux';
import styles from '../../../styles/avatar.module.css';
export default function Big({ src }) {
const [image,setImage] = useState("/defaultImage")
useEffect(()=>{
if(src){
setImage(src)
}
},[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={image}
                alt='Avatar'
            />
        </div>
    );
}

Answer 3

这不是应该如何处理错误。如果图像 src 不存在，你至少应该显示一个默认值。当您从 API 调用中获取图像时，有时图像可能已损坏或 link 不再存在。

Next.js Image 组件文档没有提及，但 Image 组件有 onError prop。在你的组件中

export default function Big(props) {
  const { src } = props;
 // initially use the passed url as imgSrc
  const [imgSrc, setImgSrc] = useState(src);
  const { darkMode } = useSelector((state) => state);
  
  // If Image component throws an error, set default 
  const handleOnError = () => {
    setImgSrc("/static/yourImage.jpg");
  };
  return (
    <div
      style={{
        filter: darkMode ? "invert(1) hue-rotate(180deg)" : "invert(0)",
      }}
    >
      <Image
        className={styles.avatar}
        width={50}
        height={50}
        src={imgSrc}
        alt="Avatar"
        // if src does not exist this function will be triggered
        onError={handleOnError}
      />
    </div>
  );
}

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

Next.js Image component error src missing though I am providing the src prop

javascript

reactjs

next.js

nextjs-image