CODEWITHSUNDEEP
next.jsnextjs-image
Waiz
Waiz

Reputation: 603

Why Nextjs not Recognising src path?

I've started using Nextjs, but it seems like there are so many headaches with this library. I try to create a simple hero component, where i use image from local source, but the src is not recognised.

I followed this tutorials How To Make a Hero Image in Next.js. It seems like it work for him! What am I missing?

Tbis is the error i get on the console:

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';

This is the component:

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;

the styles.css file

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

.imageWrapper {
  z-index: -1;
}

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

Upvotes: 1

Views: 1083

Answers (1)

Andrew Hulterstrom
Andrew Hulterstrom

Reputation: 1725

You just need to change import heroImage from '../../public/heroImage.jpeg'; to this:

import heroImage from '/heroImage.jpeg';

As the docs state:

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

Upvotes: 1

Related Questions