[Next.js] Image is missing required "src" property:

const [profileImg, setProfileImg] = useState<string>("");

  useEffect(() => {
    setMounted(true);
    if (isLogin && userInformation) {
      setProfileImg(userInformation.gender === "MAN" ? "/manIcon.png" : "/womanIcon.png");
    }
  }, [isLogin]);
  
  
  

<Image src={profileImg} alt="man" width={20} height={20} style={{ border: "1px solid black", borderRadius: "50%" }}></Image>

 Image is missing required "src" property:

 

=> 에러가 뜨는 이유? 위 코드에서 profileImg가 없을수도 있어서!

src={변수} 이면, 변수에 값이 없는 경우도 고려해주어야한다. 

 

해결

{profileImg && <Image src={profileImg} alt="man" width={20} height={20} style={{ border: "1px solid black", borderRadius: "50%" }}></Image>