问为什么Nextjs不识别src路径？

EN

error - ./components/Hero/Hero.tsx:1:0
Module not found: Can't resolve '../../public/RobotHeroImage.jpeg'
> 1 | import heroImage from '../../public/heroImage.jpeg';
  2 | import Image from 'next/image';
  3 | import styles from '../../styles/Styles.module.css';

import Image from 'next/image';
import styles from '../../styles/Styles.module.css';
import heroImage from '../../public/heroImage.jpeg';

const { heroContent, heroWrapper, imageWrapper } = styles;
    
const Hero = () => {
  return (
    <div>
      <div className={heroWrapper}>
        <div className={imageWrapper}>
          <Image priority src={IMAGE_URL} layout="fill" objectFit="cover" objectPosition="center" alt="hero image example" />
        </div>

        <div className={heroContent}>
          <h1>Hero Image</h1>
          <p>Next.js hero image example.</p>
        </div>
      </div>
    </div>
  );
};

export default Hero;

.heroWrapper {
  position: relative;
  width: 100vw;
  height: 50vh;
}

.imageWrapper {
  z-index: -1;
}

.heroContent {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}