使用"下一步"图像出现"缺少必需"src"属性的图像"错误.js

Question

这是错误：

图像丢失是必需的"src"；所有物确保你通过了"；src"；在里面道具到CCD_ 1组件。收到时间：{"宽"：48，"高"：48}

这是我的代码。我对这个问题还是一点也不理解。

import Image from 'next/image'
import { useRouter } from 'next/router'
import styles from '../styles/roomAvatar.module.css'
const RoomAvatar = ({ id, avatar, name }) => {
const router = useRouter()
const changeUrl = () => {
router.push(`?channel=${id}&name=${name}`)
}
return (
<div className={styles.wrapper} onClick={changeUrl}>
<div className={styles.roomAvatar}>
<Image src={avatar} className={styles.roomAvatarImage} height={48} width={48} alt={name} />
</div>
</div>
)
}
export default RoomAvatar

Answer 1

我认为您的avatar道具丢失或返回未定义/错误的值

const RoomAvatar = ({ id, avatar, name }) => {
console.log({avatar}) // check here or debug here to ensure
const router = useRouter()
const changeUrl = () => {
router.push(?channel=${id}&name=${name})
}
return (
<Image
src={avatart ? avatar : 'default-imge.png'} // you can define default image if avatar props is null or empty. If you have defined default value, it will reduce unexpected error/behavior
className={styles.roomAvatarImage}
height={48}
width={48}
alt={name}
/>