Next/Image on Next.js Not Showing

Question

I am using next.js 11.1.0 , my images are not showing saying (image below). I tried upgrading to next.js 12 but the problem still persist. I also tried using img tag and it works fine, just next/image not working. It seems not to work on live site production. My images are stored locally. Anyone encountered this?

                    <Image
                     src="images/Uploads/Activities/StoryTelling/3_2022-05-07203A383A38.jpeg"
                      width={500}
                      height={500}
                    />

Answer 1

If everything works fine on local but not in production it might be an image loader issue. I invite you to take a look at the documentation as you may need a custom function to resolve URLs.

Image loader

Built-in loader

I had the same issue when deploying on GCP but everything worked on Vercel.

Answer 2

Add these lines of code in the next.config.js file of your project folder

module.exports = nextConfig

module.exports = {
  images: {
    
    formats:['image/webp']
  },
}

Answer 3

import img from './images/Uploads/Activities/StoryTelling/3_2022-05-07203A383A38.jpeg'

<Image
  src={img}
  width={500}
  height={500}
/>

Answer 4

You have to write src={/photoname.format} when it's Next Image, instead of the whole path.

Answer 5

As Webber's second comment hints, the documentation states that all static files, like images, must be served from the public directory.

Another mention exists in this tutorial from Next.js.

While you are likely not still trying to figure this out, others could benefit from this clarity.

You can place your image in an images directory inside the public directory, and the path required would simply be /images/sample.jpg.