CODEWITHSUNDEEP
next.js
Shivam Sahil
Shivam Sahil

Reputation: 4921

NEXT Image not Loading in production

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>

Upvotes: 10

Views: 39407

Answers (9)

Safwat Fathi
Safwat Fathi

Reputation: 1005

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.

Upvotes: 0

Adam Bensari
Adam Bensari

Reputation: 11

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.

Upvotes: 1

gshock
gshock

Reputation: 711

@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.

Upvotes: 1

Aleno Jankowsky
Aleno Jankowsky

Reputation: 1

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

Upvotes: -1

Awais Mughal
Awais Mughal

Reputation: 377

Try Using

<Image
   unoptimized
/>

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

Upvotes: 11

Mhmdnzr
Mhmdnzr

Reputation: 147

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

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

Upvotes: 1

Sophea Sao
Sophea Sao

Reputation: 11

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

Upvotes: -2

Shivam Sahil
Shivam Sahil

Reputation: 4921

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

Upvotes: 10

Adeyemo Rasheed
Adeyemo Rasheed

Reputation: 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'
}`

Upvotes: -1

Related Questions