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