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}
                    />

A snippet of your code would help understand your problem. Could you also clarify if you are trying to display a local or external image? — paulin-crtn, May 07 '22 at 12:03
Also try opening the page using dev server and see if you get any hints in server or browser console. You might need additional configuration inside `next.config.js`. — Webber, May 07 '22 at 12:11
It works fine on dev server. I only encounter this on live server . I am using ubuntu server — Mike Tabag Estonanto, May 07 '22 at 12:12
You might wanna look into your configuration for static assets. In dev server they're always served locally but in a production build it might look for them on CDN or other. — Webber, May 07 '22 at 12:15
Also, the comment about dev server was meant to make you find hints in console, not see if it works or not :) — Webber, May 07 '22 at 12:16

paulin-crtn · Answer 1 · 2022-05-07T12:37:34.557

3

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.

edited May 07 '22 at 12:37

answered May 07 '22 at 12:26

paulin-crtn

325
2
9

score 2 · Answer 2 · answered Sep 19 '22 at 17:46

2

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

answered Sep 19 '22 at 17:46

ellamusen

31
4

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 21 '22 at 11:42
This should be the correct answer. By default you don't have to explicitly mention `/public` directory in `src` props of `Image` component, instead you just add furthermore directory of your static file like `/images/rose.svg`, so `Next.js` will assume it to `/public/images/rose.svg` – Sabbir Sobhani May 26 '23 at 07:35

score 1 · Answer 3 · answered Mar 14 '23 at 20:56

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.

score 0 · Answer 4 · edited Jun 09 '23 at 09:24

0

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

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

edited Jun 09 '23 at 09:24

Super Kai - Kazuya Ito

22,221
10
124
129

answered Jun 07 '23 at 06:05

Rushikesh Kumavat

1
1

score 0 · Answer 5 · edited Jun 08 '23 at 06:11

0

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

module.exports = nextConfig

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

edited Jun 08 '23 at 06:11

juliomalves

42,130
20
150
146

answered Jun 08 '23 at 05:17

user3550349

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 08 '23 at 06:11

Next/Image on Next.js Not Showing

5 Answers5