10

I am using NEXT to build my web app. During my dev server, everything runs smoothly and all images appear as expected but when I run next build and then next start the image disappears in the dev server.

Not sure why this is happening can someone help me?

My folder structure is as shown below:

- public
---- pictures
------ icon
-------- iphone
---------- phone1.png

And here's how I put it in my component:

<div className={classes['stack-phone-v1']}>
              <Image
                alt={'phone-image-1'}
                height={567}
                width={284}
                src='/pictures/icon/iphone/phone1.png'
              />
            </div>
Improve this question
3
  • 1
    I have had this happen to me before, couldn't find out why, but the solution I came up with was to import the image like this: import phone1 from "../public/pictures/icon/iphone/phone1.png" and just use phone1 as the src. I hope someone answers with an explanation to why this happens sometimes Commented Jan 21, 2022 at 12:44
  • Hmm, yeah right thanks for a quick fix though even I want a proper explanation to why it's not working the other way round Commented Jan 22, 2022 at 6:27
  • Yes! I also would like to see a proper explanation on this Commented Jan 22, 2022 at 16:04

10 Answers 10

Reset to default
10

Make sure to follow the casing as it is, the fileName must be typed exactly similar to what it is and that would very likely solve your issue. No extra whitespaces, no additional symbols only file name as it is.

On following up with other forums, I realized this was a very silly mistake from my side. While running images in dev server the casing doesn't matter, my image was iphone.PNG and I was reading it as iphone.png.

This is really important as it goes undetected in dev server and in production it won't load. I have seen a huge github thread for the same and suspect that this is the cause:

Generally when you see your files getting loaded but some of them not loading make sure all of them match casing exactly as they are named. Changing the import statement resolved my error. I hope this goes helpful to someone who may face same issue in future.

I just changed:

src='/pictures/icon/iphone/phone1.png' to src='/pictures/icon/iphone/phone1.PNG'

as original filename was phone1.PNG

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Awesome! This problem with Nextjs has been plaguing a few of my projects for a while, went and looked and turns out there were some capitalization differences. Really sucks the dev servers don't alert you to this.
had a similar issue on macos due to the filesystem being non case-sensitive, and therefore treating e.g. foo.PNG the same as foo.png, while version control obviously detecting these as different files. Took me a WHILE before I figured that out.
10

Try Using

<Image
   unoptimized
/>

This worked for me as the optimized request was failing on production.

Improve this answer

2 Comments

It worked for me, but can anyone give an explanation?
Using unoptimized may fix the problem but also disables Next.js Image Optimization You may rather want to investigate what the actual problem might be
1

Try install npm i next-images and add next-images to next.config.js file.

const withImage=require('next-images')
module.exports = withImage()
Improve this answer

Comments

1

@Awais Mughal's answer works but you will lose performance as @pHiL mentioned in the comments.

The correct solution is to install sharp: yarn add sharp For more information look in the official docs: https://nextjs.org/docs/messages/sharp-missing-in-production

The next/image component's default loader uses squoosh because it is quick to install and suitable for a development environment.

For a production environment using next start, it is strongly recommended you install sharp.
You are seeing this error because Image Optimization in production mode (next start) was detected.

For a production environment using output: "standalone", you must install sharp.
You are seeing this error because Image Optimization in standalone mode (output: "standalone") was detected.
Improve this answer

Comments

1

When this didn't work for me:

const nextConfig = {
  images: {
       unoptimized: true,
}};

export default nextConfig;

I just replaced all <Image> with ordinary <img> and it worked. My case was on Firebase.

Improve this answer

1 Comment

Although this worked but this isn't the right way, your assets load will take massive time depending upon the images you have in website. If you really want to go with this approach better have lazy image loading.
0

I found out that remote git branch (main) has different name than local branch.

remote -> public/Launch.png

local -> public/launch.png

When this issue solved the images started to work fine.

Improve this answer

Comments

0

In my case, even the optimized (production-like) build had the images working locally, but when I released a Docker container with those images, some ended up corrupted.

The image loaded with an HTTP 200 success status but showed the broken image icon (the one that appears when an image is not found). I entered the container and moved the file to the host, and I couldn’t open the image on the host either.

Some images, for whatever reason, ended up corrupted when moving to the Docker image, or it could be some incompatibility between images in Windows (my host) and Linux. In any case, I saw that when opening the Git repository in VS Code inside WSL2, the image couldn’t be opened.

Deleting the images folder in Linux, and then moving the directory with the images from Explorer in Windows into the Git repo inside WSL2, showed several files as different in the Git diff. I noticed those were the files that couldn’t be opened in Linux. Moving them from Windows to Linux fixed them, and I could open them (the unchanged files were the ones that could already be opened in Linux). Then I did a push in WSL2 and a pull in Windows to update those files. Their data is different, but they show exactly the same in Windows in both cases, and now they also work in Linux and inside the Docker image.

It’s some weird stuff, but this worked for me (at least for my specific problem) and it doesn’t seem to be a Next.js issue.

This isn’t about cases where images fail with 404 or 500 errors. But if your images return a 200 (or 304) status and still fail to display, this might be the cause.

Improve this answer

Comments

-1

I had a similar issue and am able to solve it by not leaving empty space " " at the end of the image path ` {

    name: 'Sunday Afolayan',
    imagePath: '/assets/team/Sunday-Afolayan.png ',
    title: 'Member'
}`

and am able to solve it by removing the empty space at the end of .png

` {

    name: 'Sunday Afolayan',
    imagePath: '/assets/team/Sunday-Afolayan.png',
    title: 'Member'
}`
Improve this answer

Comments

-1

You have a typo in there, use /icons instead of /icon.

Improve this answer

1 Comment

This appears to just by a typo in their folder structure, based on their subsequent answer. Given this, since this doesn’t answer the original question, this would be better handled as a suggested edit to the question, not as an answer.
-2

change from src='/pictures/icon/iphone/phone1.png' to src='pictures/icon/iphone/phone1.png'

Improve this answer

3 Comments

Using src='/pictures/icon/iphone/phone1.png' is the right way to reference an image from the public folder in Next.js. See nextjs.org/docs/basic-features/static-file-serving.
@juliomalves, after built still see src='/pictures/icon/iphone/phone1.png' in index.html it will go to root that why its not working, so src='pictures/icon/iphone/phone1.png' or src='./pictures/icon/iphone/phone1.png' will work.
OP has the images in the public folder, "going to the root" will work. See the link I posted above.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.